input输入框以及其新特性

1、search 类型

<input type="search"/>

在移动端中，需要去掉输入框末尾的叉号，设置以下 css 样式：

input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;
}

重设 css 样式：    

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;
}

重设边框样式：

input[type=search]{
    border-radius: 5px;
    border: 1px solid #ebebeb;//必须对默认的border:2px inset覆盖，要不然下面的样式也是白搭
    width: 98%;
    height: 30px;
    outline: none;
}

重设占位符样式：

input[type=search]::-webkit-input-placeholder{
    color: blue;
}

最后得到效果：

2、tel 类型

<input type="tel" class="searchBox" id="number"/>

在移动端中，以上设置用户在输入框中输入时并无限制，可以输入任何数字，任何长度。我因为不方便提交，因此不确定提交时会不会提示不符合类型，但这里我用了正则表达式来限制用户输入内容，并判断是否格式正确。

var telReg = new RegExp(/^[1][3,4,5,7,8]\d{9}$/);		//定义整数正则表达式，验证手机号
document.getElementById('number').onblur = function () {
    if(!telReg.test(this.value)){
        this.value='';
    }
}

3、number 类型

<input type="number" class="searchBox" id="count"/>

在移动端中，这样设置后用户只能输入数字，如果要限制最大最小数以及是否为整数，可以用正则

var integer = new RegExp(/^\d+$/);		//定义整数正则表达式，验证数量是否为整数
document.getElementById('count').oninput = function () {
    if(this.value>10 || this.value<1 || !integer.test(this.value)){ 
        this.value='';
    }
}

其余 type 新特性暂未在尝试，留待更新