用input键防止表单提交
我只是写了这个漂亮的小函数,在表单本身上工作…
$("#form").keypress(function(e){ if (e.which == 13) { var tagName = e.target.tagName.toLowerCase(); if (tagName !== "textarea") { return false; } } }
在我的逻辑我想接受input一个textareainput。 也将是一个额外的好处,取代input字段的input键行为与行为选项卡到下一个input字段(就像按Tab键)。 有谁知道一种方法来使用事件传播模型来正确地触发适当的元素上的回车键,但防止表单提交它的新闻。
你可以模仿标签键按下而不是input像这样的input:
//Press Enter in INPUT moves cursor to next INPUT $('#form').find('.input').keypress(function(e){ if ( e.which == 13 ) // Enter key = keycode 13 { $(this).next().focus(); //Use whatever selector necessary to focus the 'next' input return false; } });
当你按下Enter键时,你显然需要弄清楚需要什么select器来关注下一个input。
这里是我的function的修改版本。 它执行以下操作:
- 防止input键在textarea,button,submit之外的任何表单元素上工作。
- 回车键现在就像一个标签。
- 在元素上调用preventDefault(),stopPropagation()是好的,但是在表单上调用似乎阻止事件进入元素。
所以我的解决方法是检查元素types,如果types不是一个textarea(允许进入),或button/提交(enter = click),那么我们只是select下一件事。
在元素上调用.next()是没有用的,因为其他元素可能不是简单的兄弟,但是因为DOM在select时几乎保证了顺序,所以一切都很好。
function preventEnterSubmit(e) { if (e.which == 13) { var $targ = $(e.target); if (!$targ.is("textarea") && !$targ.is(":button,:submit")) { var focusNext = false; $(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){ if (this === e.target) { focusNext = true; } else if (focusNext){ $(this).focus(); return false; } }); return false; } } }
请注意,按下回车键后,总是会提交单个input表单。 防止这种情况发生的唯一方法是:
<form action="/search.php" method="get"> <input type="text" name="keyword" /> <input type="text" style="display: none;" /> </form>
从可用性的angular度来看,将input行为改为模仿标签是一个非常糟糕的主意。 用户习惯于使用回车键来提交表单。 这就是互联网的工作原理。 你不应该打破这个。
后input键作为默认button描述如何设置input键按下的默认行为。 但是,有时候,您需要在input按键上禁用表单提交。 如果你想完全阻止它,你需要在页面的标签上使用OnKeyPress处理程序。
<body OnKeyPress="return disableKeyPress(event)">
JavaScript代码应该是:
<script language="JavaScript"> function disableEnterKey(e) { var key; if(window.event) key = window.event.keyCode; //IE else key = e.which; //firefox return (key != 13); } </script>
如果要在input字段中按下Enter键时禁用表单提交,则必须在input字段的OnKeyPress处理程序中使用上述函数,如下所示:
<input type="text" name="txtInput" onKeyPress="return disableEnterKey(event)">
资料来源: http : //www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx
为表单和input设置触发器,但是当input事件触发时,通过调用stopPropagation方法停止传播到表单。
顺便说一下,恕我直言,把默认行为改变成任何普通用户习惯的东西都不是一件好事 – 这就是让他们在使用系统时生气的原因。 但是如果你坚持,那么stopPropagation
方法就是要走的路。
在我的情况下,我想要防止它只在一个dinamically创build的领域,并激活一些其他的button,所以这是有点不同。
$(document).on( 'keypress', '.input_class', function (e) { if (e.charCode==13) { $(this).parent('.container').children('.button_class').trigger('click'); return false; } });
在这种情况下,它将捕捉所有input的类别的input键,并触发旁边的button,并防止主窗体被冒险。
请注意,input和button必须在同一个容器中。
以前的解决scheme不适合我,但我find了解决scheme。
这将等待任何按键,testing匹配13,如果是的话返回false。
在<HEAD>中
function stopRKey(evt) { var evt = (evt) ? evt : ((event) ? event : null); var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if ((evt.which == 13) && (node.type == "text")) { return false; } } document.onkeypress = stopRKey;
我更喜欢@Dmitriy Likhten的解决scheme,但它只有当我改变了一些代码的时候才起作用:
[...] else { if (focusNext){ $(this).focus(); return false; } // }
否则,脚本不起作用。 使用Firefox 48.0.2