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 新特性暂未在尝试,留待更新