Biegral Blog

search 类型

[javascript] view plain copy

1. <input type="search"/>  

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

[css] view plain copy

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

重设 css 样式：    

[css] view plain copy

1. input[type=search]::-webkit-search-cancel-button{  
2.     -webkit-appearance: none;  
3.     position: relative;  
4.     height: 20px;  
5.     width: 20px;  
6.     border-radius: 50%;  
7.     background-color: #EBEBEB;  
8. }  
9. input[type=search]::-webkit-search-cancel-button:after{  
10.     position: absolute;  
11.     content: 'x';  
12.     left: 25%;  
13.     top: -12%;  
14.     font-size: 20px;  
15.     color: #fff;  
16. }  

重设边框样式：

[css] view plain copy

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

重设占位符样式：

[css] view plain copy

1. input[type=search]::-webkit-input-placeholder{  
2.     color: blue;  
3. }  

tel 类型

 

[html] view plain copy

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

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

[javascript] view plain copy

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

number 类型

 

[html] view plain copy

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

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

[javascript] view plain copy

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