关于input的一些处理总结

一、input标签的类型

标签	作用
<input type="text">	单行文本框
<input type="password">	密码框
<input type="checkbox">	复选框(注意name要设置相同)
<input type="radio">	单行文本框（注意name）要设置相同
<input type="file">	上传文件
<input type="submit">	提交按钮（相当于button）
<input type="reset">	重置按钮，一般用于表单居多
<textarea name=''" id="" cols="30" rows="10"></textarea>	一个文本框，可以设置宽高
<select name="" id=""> <option value=""></option></select>	下拉框，输出的是option的value值

 

 

 

 

 

 

 

 

 

 

 

 

二、placeholder（占位文本）

placeholder属性一般写一些提示语，告诉用户这个输入框是用来填写什么内容的。

当input获得焦点的时候，这个提示语就会被删除。如果你想要修改提示语的字体大小和颜色的话，你需要考虑浏览器的兼容性。

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}

三、type=hiddern隐藏域有什么作用？

隐藏域在页面中，用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单机发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器，从后台给用户隐藏域中value添加值，就可以识别用户，提高安全性。

四、在项目中我们如果需要实时监听input的值，我们需要怎么做？

我一般采用下面的方式

$("input").bind('input propertychange', function() {
       //业务逻辑代码
})

五、我们可以设置input的最大位数

oninput="if(value.length>7)value=value.slice(0,7)"
//这句话的意思就是，当输入的内容大于7位时，就截取前7位

六、在页面加载时，让input自动获焦

我们只需要在input标签中添加autofocus属性，这个属性的作用就是自动获焦，autofocus="autofocus"

七、如果你想在input失去焦点的时候做一些逻辑判断，可以用blur方法

$('.inputNumber input').blur(function () {
        //业务逻辑代码
})