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

　　　　注意：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 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;
     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; 
 }