想要在 HTML 表单字段中捕获“Enter”键

Posted 2023-03-05

【中文标题】想要在 HTML 表单字段中捕获“Enter”键

【英文标题】：Want to capture 'Enter' key press in HTML form field

【发布时间】：2014-05-06 13:37:18

【问题描述】：

我有一个 html 表单文本字段（这是一个表单字段），我想在其中捕获最终用户放入该字段的整个文本以及按下 Enter 键以换行。就像我举个例子一样，假设，我将下面的字符串完全按照这里的样子放入表单文本字段中：

I 
Pressed
Enter for a new Line.

现在，我想将这个字段输入保存到数据库中，就像最终用户填写的一样，因为我的数据库字符串可能看起来像这样

"I</br>Pressed</br>Enter for a new Line."

这对我来说没问题。但我不想像“我按 Enter 换一个新行”那样存储它。

无论如何我已经做到了。但是我的编码中有很多问题。另外，我的要求是它应该以这样的方式实现，表明当表单将打开以进行编辑并且数据库中的该文本字段中已经存在值时可以应用相同的逻辑。

有人可以帮帮我吗？

【问题讨论】：

小心，希望是错字，</br> 不是有效标签

【参考方案1】：

您可以使用replace() 方法，

$("textarea").val().replace(/\n/g, "<br />")

编辑

function captureEnter() 
 if (window.event.keyCode == 13) 
    document.getElementById("txtArea").value =document.getElementById("txtArea").value + "<br/>";
    return false;

else 
    return true;

HTML

<textarea id="txtArea" onkeypress="captureEnter();"></textarea>

【讨论】：

感谢 Anoop 的回复。您已经使用过 regexp ，虽然不是很确定。但是，我的问题是，如果我不做任何额外的事情来捕捉文本区域中的“ENTER”命中（我的意思是我只会写入文本区域并按 ENTER 写入新行），你会方法将所有 ENTER 命中数计算在内？

@user3378974 是你想要的吗？

这完全解决了我的问题。非常感谢。抱歉回复晚了。

【参考方案2】：

如果我对您的理解正确，您希望在有人按输入 input 或 type=text 时捕获，并将其替换为 <br/>。如果是这样，请使用 onkepress 事件，并监听 charcode 13，然后手动添加“”。

var tf = document.getElementById('myTextFIeld'); 
//or whatever method to find it you prefer.
tf.onkeypress = function(e)  
  //or addEventListener('keypress',...) if you'd rather
  if (e.charCode === 13) 
    this.value += '<br/>'
  

【参考方案3】：

您也可以在服务器端使用 PHP 和 nl2br()：

$thetext = nl2br($_GET['textarea']);

http://php.net/manual/en/function.nl2br.php