[英]Chrome Alert Box Submits Page Even if Returning False
在我的应用程序中，我有一个文本框来搜索项目。 在此文本框中，我希望用户在搜索之前必须输入至少2个字符。 如果少于2个字符，那么我想显示一个简单的警告框，告诉用户输入至少2个字符。 在我的文本框代码看起来像：
function checkSearchLen(obj, defaultEnterButton) { if (obj.value == 'Search') obj.value = ''; if (obj.value.length < 2 && event.keyCode == 13) { event.returnValue = false; event.cancel = true; alert('Please ENter at Least 2 Characters'); //return false; obj.select(); obj.focus(); return false; } else doEnterKey(defaultEnterButton); } function doEnterKey(s) { if (event.keyCode == 13) { event.returnValue = false; event.cancel = true; document.getElementById(s).click(); } }
<input class="searchtext" id="txtSearch" value="Search" onfocus="this.value = '';this.style.color='black';this.style.fontStyle='normal';" onkeydown="checkSearchLen(this,'MenuBar_imgSearchGo');" name="txtSearch" />
在Internet Explorer中一切正常，javascript代码停止等待来自用户的输入然后继续，返回false。 但是在chrome中，会显示警告框，它仍然会提交表单，就好像它没有将false返回给元素一样。
处理这类问题的最好方法是使用Jquery ......只需几行Jquery代码就能完成你在整个程序中所做的事情！
在调用中传递事件对象，然后在ENTER上阻止事件默认。
我使用了按键事件并在IE，FF和Chrome上进行了测试。
现在不会发生表单提交的警告消息，因为阻止了ENTER。
function checkSearchLen(event, obj, defaultEnterButton) { event = event || window.event; if (obj.value == 'Search') obj.value = ''; if (obj.value.length < 2 && event.keyCode == 13) { alert('Please ENter at Least 2 Characters'); obj.select(); obj.focus(); event.preventDefault(); return false; } else doEnterKey(defaultEnterButton); } function doEnterKey(s) { if (event.keyCode == 13) { event.returnValue = false; event.cancel = true; document.getElementById(s).click(); } }
<form action="http://www.google.com" onsubmit="alert('submit');"> <input class="searchtext" id="txtSearch" value="Search" onfocus="this.value = '';this.style.color='black';this.style.fontStyle='normal';" onkeypress="checkSearchLen(event, this,'MenuBar_imgSearchGo');" name="txtSearch" /> </form>
另一个替代答案是检查表单提交事件并根据无效输入取消提交事件。 这将阻止页面回发。 实际上，这与ASP.Net框架在页面中启用了客户端验证的ASP.Net验证器时所采用的方法相同。
此外，没有必要在doEnterKey取消事件，所以我在该函数中注释了两行。
以下代码将起作用，因为我已在我身边测试过。 使用的逻辑有两个方面：
stopSubmit决定是否取消表单提交事件。 如果此变量为true，则表单提交事件将取消。 表单的原始表单提交事件代码正在使用我们的自定义JavaScript预先填写，如果需要取消表单提交，将返回false。 当页面的主体加载即body的onload事件调用setFormSubmit来修改现有的表单提交代码时，就会发生这种情况。 如果一切都有效，那么原始表单提交代码会在没有问题和页面帖子的情况下执行。
<body onload="setFormSubmit()"> <form id="form1" runat="server"> <asp:Label ID="label1" runat="server"></asp:Label> <div> First name: <input type="text" name="FirstName" value="Mickey" /><br /> Last name: <input type="text" name="LastName" value="Mouse" /><br /> <input type="submit" value="Submit" /> <input type="text" onkeydown="checkSearchLen(this,'MenuBar_imgSearchGo');" /> <input type="submit" value="Submit" id="MenuBar_imgSearchGo"/> </div> <script> var stopSubmit = false; function setFormSubmit() { document.forms[0].setAttribute("onsubmit", " var stopPostback = StopPostback(); if(stopPostback === true) { return false; } " + (document.forms[0].onsubmit === null ? "" : document.forms[0].onsubmit)); } function checkSearchLen(obj, defaultEnterButton) { if (obj.value === 'Search') obj.value = ''; if (obj.value.length < 2 && event.keyCode == 13) { event.returnValue = false; event.cancel = true; stopSubmit = true; alert('Please ENter at Least 2 Characters'); obj.select(); obj.focus(); return false; } else { stopSubmit = false; doEnterKey(defaultEnterButton); } } function doEnterKey(s) { if (event.keyCode == 13) { //event.returnValue = false; //event.cancel = true; document.getElementById(s).click(); } } function StopPostback() { if (stopSubmit === true) { stopSubmit = false; return true; } return false; } </script> </form>
尽管javascript验证返回false并显示警报消息，但表单仍提交
[英]Form submits despite of javascript validation returning false and displaying alert message
为什么即使 rgb 值相等，警报也会返回 false（仅考虑奇数值）
[英]Why is alert returning false even when rgb values are equal(considering odd values only)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.