【问题标题】:How to submit a form on enter when the textarea has focus?当文本区域有焦点时如何在输入时提交表单?
【发布时间】:2011-05-24 01:26:25
【问题描述】:

填写表单的文本区域时,按回车键时的默认行为是移动到下一行。如何更改表单的行为,以便即使用户在文本区域中,它也会在用户按 Enter 时提交?

我使用 Firebug 来检查 StackOverflow 的评论文本区域(具有此行为),但看不到任何实现此效果的 JavaScript。有没有办法在不使用 JavaScript 的情况下改变 textarea 的行为?

【问题讨论】:

  • 如果我们将此问题重命名为“在 textarea 中时提交表单”会怎样?

标签: html forms


【解决方案1】:

如果没有 JavaScript,您将无法做到这一点。 Stackoverflow 正在使用 jQuery JavaScript 库,该库在页面加载时将函数附加到 HTML 元素。

以下是使用原生 JavaScript 的方法:

<textarea onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }"></textarea>

Keycode 13 是回车键。

您可以像 Stackoverflow 那样使用 jQuery 来做到这一点:

<textarea class="commentarea"></textarea>

$(document).ready(function() {
    $('.commentarea').keydown(function(event) {
        if (event.which == 13) {
            this.form.submit();
            event.preventDefault();
         }
    });
});

【讨论】:

  • 由于用户更熟悉释放键时的操作,因此使用 onkeyup 或 keyup() 代替 keydown() 是更好的做法。
  • 很好的解释。 @Eric Fortis - 关于 onkeyup 的要点。
  • 我将编写一个函数并将其放入我的表单函数文件中,以尝试保持代码干净。
  • 这个答案就像一个魅力!这是我认为 vanilla javascript 比 jQuery 等价物更容易实现的一种情况。
  • 作为旁注,执行this.form.submit() 不会触发您可能拥有的任何事件侦听器,也不会运行表单的onsubmit 属性中的代码。为了触发这些事件,您需要调用 this.form.requestSubmit()
【解决方案2】:
<form id="myform">
    <input type="textbox" id="field"/>
    <input type="button" value="submit">
</form>

<script>
    $(function () {
        $("#field").keyup(function (event) {
            if (event.which === 13) {
                document.myform.submit();
            }
        }
    });
</script>

【讨论】:

  • 请注意 HTML 的相关部分是 ID,我使用了一个文本框,但它可以是您想要附加行为的任何标签。同样为了可读性,我更喜欢通过它的 ID 调用表单,如果你的代码中有多个表单,这非常方便。
  • 很好,我现在不打算学习 jquery。我更喜欢自己编写函数,因为这样我就有机会练习编写 javascript
【解决方案3】:

为什么要在按回车时提交文本区域?

当您按下回车键时,默认情况下会提交“文本”输入。它是单行输入。

<input type="text" value="...">

“textarea”不会,因为它受益于多行功能。在进入时提交会带走一些好处。

<textarea name="area"></textarea>

您可以添加 JavaScript 代码来检测回车键并自动提交,但最好使用文本输入。

【讨论】:

  • 因为我想要一个多行输入框,并且我希望用户能够按回车键提交。我将完全取消提交按钮。我认为如果他们允许在按下回车键时提交评论,那么 SO 应该去掉他们的添加评论按钮
猜你喜欢
  • 1970-01-01
  • 2011-04-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多