input输入框以及其新特性

<input type="search"/>  

1.在移动端中，需要去掉输入框末尾的叉号，设置以下 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='';  
    }  
} 

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