输入触发器按钮单击

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

我找不到任何看起来像是设置默认按钮的可靠方法的东西，在这一点上我也不一定想要。在没有更好的方法的情况下，我在窗体上的任意位置都捕获了一个按键，如果它是<Enter>被按下的键，那么我就是在否定它：

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

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

据我所知，它似乎正在工作，但是感觉很难受。

有谁知道更复杂的技术来做到这一点？

同样，我只是不知道该解决方案有什么陷阱？

谢谢。

使用

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

应该可以。

原因是因为表单内的按钮的类型隐式设置为submit。作为zzzzBoz说，规范说，第一button或input用type="submit"是什么在这种情况下触发。如果您专门设置type="button"，则浏览器会将其从考虑中删除。

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

在HTML5规范明确规定在发生的事情implicit submissions：

表单元素的默认按钮是树形顺序中的第一个提交按钮，其表单所有者是该表单元素。

如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段被隐式聚焦时，按下“ enter”键，则提交表单），则对默认按钮已定义激活的表单执行此操作行为必须导致用户代理在该默认按钮上运行综合点击激活步骤。

在HTML4规范中并未对此进行明确说明，但是浏览器已经在实现HTML5规范中描述的内容（这就是为什么将其明确包含在内）的原因。

编辑添加：

我能想到的最简单的答案是将提交按钮作为[type="submit"]表单中的第一项，使用CSS将填充添加到表单底部，然后将提交按钮绝对定位在您想要的底部。

我认为您不需要JavaScript或CSS即可解决此问题。

根据html 5按钮规范，没有类型属性的按钮与类型设置为“提交”的按钮被视为相同，即，作为提交其包含表单的按钮。将按钮的类型设置为“按钮”应该可以防止您看到的行为。

我不确定浏览器对此是否支持，但是在html 4.01规范中为按钮指定了相同的行为，因此我希望它相当不错。

<button>默认情况下，无论您在哪里使用元素，它都会考虑该按钮，type="submit"因此，如果定义该按钮，type="button"则不会将其<button>视为提交按钮。

通过在焦点上按“ Enter”，<input type="text">您将在第一个定位的元素上触发“ click”事件：<button>或<input type="submit">。如果在中按“ Enter”键<textarea>，则只需新建一个文本行。

请参阅此处的示例。

您的代码阻止在其中输入新的文本行<textarea>，因此您只需要按键即可<input type="text">。

但是，为什么需要Enter在文本字段中按？如果您想按“ Enter”键提交表单，但<button>必须在布局中排在首位，则只需使用标记：将<input type="submit">代码放在之前，<button>并使用CSS保存所需的布局。

捕捉“输入”并保存标记：

$('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`*/
});

默认情况下，在表单的文本字段中按Enter键将提交表单。如果您不希望它那样工作，则必须捕获Enter键并像完成操作一样使用它。这没有办法。即使表单中没有按钮，它也将以这种方式工作。

您可以使用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会阻止表单实际提交，直到您真正按下按钮为止。

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（），则会触发其他按钮。

我将按如下所示进行操作：在按钮（未提交）的onclick事件的处理程序中，检查事件对象的键码。如果是“输入”，我将返回false。

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

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

我找到了在此处设置默认按钮的答案：

<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按钮设置为不存在的表单，并将要在键上Update触发的按钮设置Enter为用户在输入文本时将要使用的表单。

到目前为止，这是对我唯一有效的方法。

你可以做这样的事情。

将事件绑定到通用函数中，然后通过按键或单击按钮来调用事件。

例如。

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

我添加了一个“提交”类型的按钮作为表单的第一个元素，并使它不可见（width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;）。就像刷新站点一样工作，即按下按钮时我什么也没做，只是重新加载了站点。对我来说很好...

本文地址：http://javascript.askforanswer.com/shuruchufaqianniudanji.html
文章标签：enter , forms , html , javascript , jquery
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载