input type的相关理解

Liudongge commented 6 years ago

type并不能作为验证依据, type字段只是为输入提供选择格式, 更多情况下应该说新增的type是为了适配移动端web app的存在例如说当type=tel的时候,在手机上打开页面会出现电话键盘(不是数字键盘,两者并不一样,电话键盘还包括*和#) 当type=email的时候,会出现带@和.com符号的全键盘(各设配各系统实现貌似有差异) 所以才要有pattern的存在, 当触发表单提交的时候,浏览器会将输入与pattern属性做匹配来最终判断是否有效输入当然了,后端验证数据有效性就在此问题的范畴之外了

chrome下当type=email或者type=url的时候,触发提交,就算没有pattern也会对输入内容进行检查然后提示,但是type=tel却没有,Safari下则是全部都没有进行内容检查,这就是浏览器产商各自实现的差异了,为了保持浏览器行为的一致性,都应该加上pattern属性

Liudongge commented 6 years ago

另外，input type为tel的时候，可以使用maxlength属性，但是type为number时，maxlength属性是失效的。如果想实现电话号码输入框只可以输入11位数字的效果，使用type为number并判断是否为数字的pattern方式虽然可以使用，但是会连删除等按钮都失效。具体实现方式：

可以使用type为tel和maxlength的组合以实现移动端数字输入限制的效果。

type为number时，在input的keypress事件下加入限制，可以实现PC端只能输入

$("#mobileInput").on("keypress", function(e) {
var keyStr = String.fromCharCode(e.keyCode);
if ($(this).val().length === 11 || keyStr === 'e' || keyStr === '.') {
return false;
}
});

Liudongge commented 6 years ago

input的type为“text”时，只允许数字输入：

 $("#phone").keyup(function(){
    var tmptxt = $(this).val();
    $(this).val(tmptxt.replace(/[^\d]/g, ''));
  }).bind("paste",function(){
    var tmptxt = $(this).val();
    $(this).val(tmptxt.replace(/[^\d]/g,''));
  });

Liudongge / JavaScript_Notes

input type的相关理解 #14