<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;
}
最后得到效果:
<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='';
}
}