摘要：
H5新增input的属性上下加减进度条text可以点删除默认日历色板提示autofocus="autofocus"//input自动聚焦placeholder="请输入客户的手机或姓名"//输入框没有内容时出现autocomplete="on"//是否记录上一次登录的号码（"on"默认，规定启用自动完成功能。"off"规定禁用自动完成功能）react使用注意事项表单元素设置默认值的时候会报错，因为它认为input为一个受限的组件。value值是动态就会操作数据，会变化，就一定要有事件，所以才会报错。
H5新增input的属性
<input type="number" min="2" max="10" step="2"/> 上下加减
<input type="range" min="2" max="10" step="2"/> 进度条
<input type="search"/> text可以点删除
<input type="date"/> 默认日历
<input type="color"/> 色板
<input type="text" autocomplete="on" name="tel" /> 提示
autofocus="autofocus" // input自动聚焦
placeholder="请输入客户的手机或姓名" // 输入框没有内容时出现
autocomplete="on" //是否记录上一次登录的号码（"on" 默认，规定启用自动完成功能。 "off" 规定禁用自动完成功能 ）
react 使用 <input/> 注意事项
表单元素设置默认值（value='xxx'）的时候会报错，因为它认为input为一个受限的组件。value值是动态就会操作数据（value就一定会变化），会变化，就一定要有事件（onChange），所以才会报错。
比如：<input value="1"/> 报错
两种方式解决：
1.给表单元素加上事件（onChange）（受控组件，官方推荐使用）
<input value = {a} onChange = {this.xxxx}/>2.定义默认值的时候就使用 defaultValue （非受控组件）
<input defaultValue = '123' />
注意：value 和defaultValue 不要一起使用
聚焦时默认内容选中状态
<input value={value} onFocus={(ev) => { ev.target.select() }} onChange={this.changeText}></input>input 默认样式 修改
input { background: none; outline: none; border: 0.01rem solid #E1E3EC; height: 0.38rem; line-height: 0.38rem; 1.8rem; text-indent: 1em; margin: 0 0.2rem; &:hover{ border: 0.01rem solid #427AFF; } &:focus{ border: 0.01rem solid #427AFF; } } input[disabled] { //input 为 禁用 状态时的样式 cursor: no -drop; }
input type="search"搜索的坑
<form action="" id="form"> <input type="search" placeholder="请输入客户的手机或姓名" autocomplete="off"> </form>
submit事件要选择form元素
$('#form').submit(function(e) {
e.preventDefault()
e.stopPropagation()
search()
}设置input autocomplete="off"去掉弹出的下拉框；
<input type="text" autocomplete={autocomplete} />将默认的“x”隐藏掉：
input[type="search"]::-webkit-search-cancel-button{
display: none;
}针对ios 设置样式, 去除ios下input 椭圆形:
-webkit-appearance: none;
使用css3新增的属性来控制input[type=search]
::-webkit-input-placeholder
::-webkit-search-cancel-button重写占位符样式
input[type=search]::-webkit-input-placeholder{
color: blue;
}重写后面的小×样式
input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none;//此处只是去掉默认的小× } input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; position: relative; height: 20px; 20px; border-radius: 50%; background-color: #EBEBEB; } input[type=search]::-webkit-search-cancel-button:after{ position: absolute; content: 'x'; left: 25%; top: -12%; font-size: 20px; color: #fff; }
在input框中加入disabled=”disabled”之后，如何设置样式
input[disabled]{ color:#fff; opacity:1; }
改变input光标的3种方法
方法一：
这也是最简单的一种了,但是字体颜色也会跟着一起变化
input{
color:red;
}方法二：
此方法有兼容性要求，低版本浏览器跟部分移动端不会显示
input{ caret-color:transparent; //css3属性 }
方法三：
此方法主要是利用镂空属性，隐藏原本文字，再利用text-shadow改变字体的颜色，而光标的颜色不变
input,textarea { color: rgb(60, 0, 248); /*光标的颜色*/text-shadow: 0px 0px 0px #D60B0B; /*文本颜色 */ -webkit-text-fill-color: transparent; } /*此外下面的placeholder改变颜色同样适用*/input::-webkit-input-placeholder{ color: rgb(60, 0, 248); /*改变placeholder文本颜色 */text-shadow: none; -webkit-text-fill-color: initial; }