Html textarea 在 jquery keypress 上不是最新的

Posted 2023-05-07

【中文标题】Html textarea 在 jquery keypress 上不是最新的

【英文标题】：Html textarea isn't up-to-date on jquery keypress

【发布时间】：2021-07-09 20:46:46

【问题描述】：

我在一个页面上有一堆表单，每个表单都包含一个 html 文本区域：

<textarea name="Comment" class="inputTextArea">Hello World!</textarea>

我有 javascript 事件处理程序，当用户按 Enter 时提交表单：

$(".inputTextArea").keypress(function (e) 
    if (e.which === 13 && !e.shiftKey) 
        $(this).closest("form").submit();
        e.preventDefault();
    
);

javascript确实在Enter上提交了表单，但是提交的数据不包含textarea的当前内容。

如果我在调用 submit() 时设置断点并查看“this”的内容（即 textarea），innerHTML 会显示 initial textarea 的内容（即“Hello世界！”）而不是当前文本区域中的文本（例如，“再见世界！”）。

在提交之前我需要做些什么来更新 textarea 控件的内容吗？

谢谢！

解决方案（或“原因”或“”）

我的表单有两个提交按钮，所以我对 $(this).closest("form").submit() 的调用没有选择我期望的按钮（“保存”按钮）。当表单发布时，我没有保存发布的数据，并认为 textarea 没有更新——事实并非如此。

我的解决方案是确保在按下 Enter 时单击了正确的按钮。

var buttons = $(this).closest('form').find(':submit');
buttons[0].click();

令人尴尬的是，这个主题及其标题与问题或解决方案无关，但也许我笨拙的解决方案路径会对其他人有所帮助。

【问题讨论】：

在文本区域中输入不会改变.innerHTML，它会改变.value。您不必更新内容，您应该能够提交它。

James 知道 .value 而不是 .innerHTML 的变化很快就暴露了问题（即，我可以看到 .value 已经发生了变化）。

【参考方案1】：

在提供的代码中它应该可以完美运行，问题可能在表单中

$(".inputTextArea").keypress(function (e) 
    if (e.which === 13 && !e.shiftKey) 
        $(this).closest("form").submit();
        e.preventDefault();
    
);

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<form >
<textarea name="Comment" class="inputTextArea">Hello World!</textarea>
  <button type="submit" class="btn btn-primary submit-btn">Submit</button>
</form>

【讨论】：

是的，Adeeb，问题出在表格上。我有两个提交按钮。我编辑了我最初的帖子以暴露问题。