IE10 Validation bug with maxlength and placeholder on textbox

六月ゝ 毕业季﹏ 提交于 2019-12-23 09:07:14

问题


I have a textbox for Age:

<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="2">

Upon clicking submit, this input is instantly bordered red. There is no postback. I'm assuming IE10 believes the client has actually typed in "Age (optional)" which is greater than the maxlength of 2.

Is there anyway to get around this without making the user do anything in their browser's settings and without removing the maxlength attribute?


回答1:


You can use the novalidate and formnovalidate attributes. See this link for more information.

Internet Explorer 10 and Windows Store apps using JavaScript add new support for HTML5 Forms, including new states of the type attribute (on the input element), new attributes for the input element, and the progress element. This support enables developers to quickly and easily provide user prompting, input validation, and feedback with a minimal amount of script.

Source: http://msdn.microsoft.com/en-us/library/ie/hh673544(v=vs.85).aspx




回答2:


I faced same problem.

In this case you should change your max length to 10 so it will not be issue for max length and set the max length that you want for your textbox using javascript like following.

function setMaxLength(obj, len) {
return (obj.value.length < len);
}

and call this function like following

<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="10" onkeypress="return setMaxLength(this,2);">

This will resolve your issue.




回答3:


I had the same issue, in my case it was a GUID field, which was hidden as I didn't need to have it displayed on screen. So I had display:none and maxlength=0. Yet, IE was performing the validation, the postback was failing and I had no idea why. It took me half day to figure it out, the solution was to set maxlength=36.



来源:https://stackoverflow.com/questions/16223832/ie10-validation-bug-with-maxlength-and-placeholder-on-textbox

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!