input

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' />

　　　　　　3.  value 和 defaultValue 不要一起使用

input type="search"搜索的坑

<form action="" id="form">
　　<input id="search" type="search" placeholder="请输入客户的手机或姓名" autocomplete="off">
</form>

submit事件要选择form元素

  $('#form').submit(function (e) {
    e.preventDefault()
    e.stopPropagation()
    search()
  }

设置input autocomplete="off"去掉弹出的下拉框；

<input type="text" id="phone" 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;
    width: 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;
}

 

转载于:https://www.cnblogs.com/MrZhujl/p/11527941.html