jquery禁用表单提交时输入
jquery disable form submit on enter
我的页面中有以下javascript,它似乎不起作用。
$('form').bind("keypress", function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
我想禁用在输入时提交表单,或者更好的是,调用我的 ajax 表单提交。 这两种解决方案都是可以接受的,但我上面包含的代码不会阻止表单提交。
如果未捕获keyCode
,请捕获which
:
$('#formid').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
编辑:错过了,最好使用keyup
而不是keypress
编辑2:与某些较新版本的Firefox一样,表单提交不会被阻止,因此将按键事件添加到表单中也更安全。此外,它不再起作用(不再?),只需将事件绑定到表单"name",而仅绑定到表单 id。因此,我通过适当地更改代码示例使这一点更加明显。
编辑3:将bind()
更改为on()
当您专注于输入元素时,会在 Enter 上提交表单。
我们可以在表单中的输入元素上禁用 Enter 键(代码 13
):
$('form input').on('keypress', function(e) {
return e.which !== 13;
});
演示:http://jsfiddle.net/bnx96/325/
甚至更短:
$('myform').submit(function() {
return false;
});
$('form').keyup(function(e) {
return e.which !== 13
});
event.what 属性规范化 event.keyCode 和 event.charCode。建议观看 event.哪个键盘键输入。
which
文档。
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.which == 13) {
e.preventDefault();
return false;
}
});
此解决方案适用于网站上的所有表单(也适用于使用 ajax 插入的表单),仅防止输入文本。把它放在一个文档就绪功能中,一辈子忘记这个问题。
上面的大多数答案都会阻止用户在文本区域字段中添加新行。如果您想避免这种情况,您可以通过检查当前具有焦点的元素来排除此特殊情况:
var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
e.preventDefault();
return false;
}
如果您只想禁用输入时提交和提交按钮,请使用表单的提交事件
<form onsubmit="return false;">
您可以将"return false"替换为对JS函数的调用,该函数将执行任何需要的操作,并在最后一步提交表单。
简单的方法是将按钮的类型更改为按钮 - 在 html 中,然后在 js 中添加事件...
从此更改:
<form id="myForm">
<button type="submit">Submit</button>
</form>
自
<form id="myForm">
<button type="button" id="btnSubmit">Submit</button>
</form>
在js或jquery中添加:
$("#btnSubmit").click(function () {
$('#myForm').submit();
});
必须捕获和测试 ENTER 键的每个击键的矫枉过正确实让我感到困扰,因此我的解决方案依赖于以下浏览器行为:
按 Enter 将触发提交按钮上的单击事件(在 IE11、Chrome 38、FF 31 中测试)**(参考: http://mattsnider.com/how-forms-submit-when-pressing-enter/)
所以我的解决方案是删除标准提交按钮(即 <input type="submit">
),以便上述行为失败,因为在按下 Enter 时没有可以神奇地单击的提交按钮。相反,我在常规按钮上使用jQuery单击处理程序通过jQuery的.submit()
方法提交表单。
<form id="myform" method="post">
<input name="fav_color" type="text">
<input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>
<script>
$('#form-button-submit').click(function(){
$('#myform').submit();
});
</script>
演示:http://codepen.io/anon/pen/fxeyv?editors=101
** 如果表单只有 1 个输入字段,并且该字段是"文本"输入,则此行为不适用;在这种情况下,即使 HTML 标记中不存在提交按钮(例如搜索字段),表单也将通过 ENTER 键提交。自 90 年代以来,这一直是标准的浏览器行为。
你可以在纯Javascript中完美地做到这一点,简单且不需要库。这是我对类似主题的详细回答:禁用表单的回车键
简而言之,这是代码:
<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>
此代码是为了防止仅输入类型="文本"的"Enter"键。(因为访问者可能需要在整个页面上按回车键)如果还想禁用"Enter"进行其他操作,可以添加控制台.log(e);为了您的测试目的,在 Chrome 中按 F12,转到"控制台"选项卡并点击页面上的"退格键"并查看返回的值,然后您可以定位所有这些参数以进一步增强上面的代码以满足您对"e.target.nodeName"、"e.target.type"等的需求......
您是否已经解决了这个问题,或者现在是否有人试图解决这个问题,但是,这是我的解决方案!
$j(':input:not(textarea)').keydown(function(event){
var kc = event.witch || event.keyCode;
if(kc == 13){
event.preventDefault();
$j(this).closest('form').attr('data-oldaction', function(){
return $(this).attr('action');
}).attr('action', 'javascript:;');
alert('some_text_if_you_want');
$j(this).closest('form').attr('action', function(){
return $(this).attr('data-oldaction');
});
return false;
}
});
在 Firefox 中,当您输入并按回车键时,它将提交其上层形式。解决方案在将提交表格中添加以下内容:
<input type="submit" onclick="return false;" style="display:none" />
$('#FormID').on('keyup keypress', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
以下代码将否定用于提交表单的输入键,但仍允许您在文本区域中使用 Enter 键。您可以根据需要进一步编辑它。
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) ) {return false;}
}
document.onkeypress = stopRKey;
</script>
3 年后,没有一个人完全回答这个问题。
提问者希望取消默认表单提交并调用自己的 Ajax。这是一个简单的请求,有一个简单的解决方案。无需截获输入到每个输入中的每个字符。
假设表单有一个提交按钮,无论是<button id="save-form">
还是<input id="save-form" type="submit">
,都执行:
$("#save-form").on("click", function () {
$.ajax({
...
});
return false;
});
下面是一个简单的 JavaScript 解决方案,不使用处理键下或按键事件的不同变体:
document.forms[0].addEventListener('submit', function(e) {
if(document.activeElement.getAttribute('type') !== 'submit') {
e.preventDefault();
}
});
仅当页面上的活动元素是提交按钮时,才会提交表单。因此,您可以通过单击提交按钮或在提交按钮具有焦点时按 Enter 键来提交表单。
我听说不推荐which
,所以请对此更改最佳评分答案。
$('#formid').on('keyup keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
return false;
}
});
参考 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which
使用 EnterByTab() 作为消除的 Enter->Submit 表单
function EnterByTab(){ //only in form
$('body').on('keydown', 'input, select, radio', function(e) {
if (e.key === "Enter") {
var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
focusable=form.find(':input,a,select,button,textarea').filter(':visible');
next = focusable.eq(focusable.index(this)+1);
var i=1;
while (next.attr('readonly') || next.prop("type")=="radio") {
i++;
next = focusable.eq(focusable.index(this)+i);
}
if (next.length) {
next.focus();
} else {
form.submit(); //original behavior
}
return false;
}
});
}
当文件完成(加载完成)时,脚本会检测每个事件中的"Entry"键,并禁用后面的事件。
<script>
$(document).ready(function () {
$(window).keydown(function(event){
if(event.keyCode == 13) {
e.preventDefault(); // Disable the " Entry " key
return false;
}
});
});
</script>
JavaScript 中适用于所有浏览器的完整解决方案
上面的代码和大多数解决方案都是完美的。但是,我认为最喜欢的一个不完整的"简短答案"。
所以这是完整的答案。 在JavaScript中,也对IE 7的原生支持。
var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});
此解决方案现在将阻止用户使用 enter 键提交,并且不会重新加载页面,也不会将您带到页面顶部(如果您的表单位于下方的某个位置)。
这个怎么样:
$(":submit").closest("form").submit(function(){
$(':submit').attr('disabled', 'disabled');
});
这应该会禁用应用中带有提交按钮的所有表单。
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- jquery表单提交无法使用多个输入(IE和Firefox)
- 如何在表单提交后清除输入字段
- 如何在没有表单提交、没有js、没有jquery和没有ajax的情况下将输入的文本框值存储到php变量中
- 单输入表单 - 特殊情况 |停止表单提交
- 如何将多个条件添加到表单提交或文本框输入中
- 在表单提交中填充输入字段
- jquery禁用表单提交时输入
- jquery禁用表单提交时输入MVC 4
- 单击带有引导文件输入的上传时停止表单提交
- 如果电子邮件输入处于焦点上,则阻止输入按钮表单提交 (jquery)
- 向文件 php 表单提交添加多个输入
- 使用 jQuery 在表单提交时将隐藏的输入值设置为数据 URL
- 如何使用输入类型=使用 AJAX 表单提交
- 在表单提交后将 get 变量附加到 url,而无需新的隐藏输入
- 使用 jQuery 在单击输入时忽略表单提交
- 从用户那里获取输入并在表单提交时打开弹出窗口
- 为输入表单提交数据而不是文件
- 试图改变我的提交输入表单提交值
- 输入表单提交上的引导状态按钮