首页 文章

输入触发按钮单击

提问于
浏览 次
143

我有一个带两个按钮的页面 . 一个是 <button> 元素，另一个是 <input type="submit"> . 按钮按顺序显示在页面上 . 如果我在表单中的任何位置的文本字段中并按 <Enter> ，则会触发按钮元素的 click 事件 . 我认为那是因为按钮元素位于第一位 .

我可以在表单的任何地方捕获一个按键，如果它是按下的 <Enter> 键，我只是否定它：

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

据我所知，到目前为止，它似乎正在起作用，但它感觉非常火腿 .

有谁知道这样做的更复杂的技术？

同样，这个解决方案是否有任何陷阱，我只是不知道？

谢谢 .

javascript jquery html forms enter

11 回答

  • 0

    运用

    <button type="button">Whatever</button>

    应该做的伎俩 .

    原因是因为表单内的按钮的类型隐式设置为 submit . 正如zzzzBoz所说，规则说第一个 button 或 input 与 type="submit" 是在这种情况下触发的 . 如果您专门设置了 type="button" ，那么它将被浏览器删除 .

    回复于
  • 2

    阅读HTML规范以真正了解预期的行为非常重要：

    HTML5 spec explicitly states what happens in implicit submissions：

    表单元素的默认按钮是树顺序中的第一个提交按钮，其表单所有者是该表单元素 . 如果用户代理支持让用户隐式提交表单（例如，在某些平台上按下“enter”键，而文本字段被聚焦则隐式提交表单），然后对默认按钮具有已定义激活的表单执行此操作行为必须使用户代理在该默认按钮上运行合成单击激活步骤 .

    这在HTML4规范中没有明确说明，但是浏览器已经实现了HTML5规范中描述的内容（这就是明确包含它的原因） .

    编辑添加：

    我能想到的最简单的答案是将提交按钮作为表单中的第一个 [type="submit"] 项，使用css在表单底部添加填充，并将提交按钮绝对放在您喜欢的底部 .

    回复于
  • 0

    我认为你不需要javascript或CSS来解决这个问题 .

    根据html 5 spec for buttons，没有类型属性的按钮被视为与其类型设置为"submit"的按钮相同，即作为用于提交其包含形式的按钮 . 设置按钮's type to 2935823 should prevent the behaviour you'重新看到 .

    我不确定浏览器对此的支持，但html 4.01 spec for buttons中指定了相同的行为，所以我希望它非常好 .

    回复于
  • 1

    通过在 <input type="text"> 上按'Enter'，您会在第一个定位元素上触发'click'事件： <button> 或 <input type="submit"> . 如果在 <textarea> 中按'Enter'，则只需创建一个新文本行 .

    请参见示例here .

    您的代码阻止在 <textarea> 中创建新文本行，因此您必须仅按 <input type="text"> 按键 .

    但为什么你需要在文本字段中按 Enter ？如果要通过按'Enter'提交表单，但 <button> 必须保留在布局中的第一个，只需使用标记：将 <input type="submit"> 代码放在 <button> 之前并使用CSS保存所需的布局 .

    捕获'Enter'并保存标记：

    $('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});
    回复于
  • 312

    您可以使用javascript阻止表单提交，直到适当的时间 . 一个非常粗略的例子：

    <form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

    按Enter键仍将触发表单提交，但javascript将使其不能实际提交，直到您实际按下按钮 .

    回复于
  • -1

    默认情况下，在表单的文本字段中按Enter键将提交表单 . 如果您不希望它以这种方式工作，您必须按下回车键并按照您的方式使用它 . 没有办法解决这个问题 . 即使表单中没有按钮，它也会以这种方式工作 .

    回复于
  • 51

    默认情况下你在哪里使用 <button> 元素它会认为按钮 type="submit" 所以如果你定义按钮 type="button" 那么它就不会认为 <button> 为提交按钮 .

    回复于
  • 1

    我会这样做如下：在按钮的onclick事件的处理程序（不提交）中检查事件对象的键代码 . 如果是“输入”，我会返回false .

    回复于
  • 9

    我的情况在表单元素中有两个 Submit 按钮： Update 和 Delete . Delete 按钮删除图像， Update 按钮使用表单中的文本字段更新数据库 .

    因为 Delete 按钮是表单中的第一个按钮，所以它是默认按钮在 Enter 键 . 不是我想要的 . 用户希望在更改某些文本字段后能够点击 Enter .

    我找到了设置默认按钮here的答案：

    <form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

    在不使用任何脚本的情况下，我使用 <button> form="bla" 属性定义了每个按钮所属的表单 . 我将 Delete 按钮设置为不存在的表单，并将我想要在 Enter 键上触发的 Update 按钮设置为用户在输入文本时所在的表单 .

    到目前为止，这是唯一对我有用的东西 .

    回复于
  • 0

    Dom例子

    <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

    JavaScript的

    function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

    如果你不使用preventDefault（），将触发其他按钮 .

    回复于
  • 19

    我添加了一个类型为"submit"的按钮作为表单的第一个元素，并使其不可见（ width:0;height:0;padding:0;margin:0;border-style:none;font-size:0; ） . 像刷新网站一样工作，即按下按钮时我什么都不做，除了再次加载网站 . 对我来说工作得很好......

    回复于

相关问题