input之question
日常开发中遇到的input的一些问题
一、当input的type为number时,maxLangth失效;
需求:input只能输入数字并限制长度
解决办法:
1、弃用maxLangth
<input type="number" placeholder="请输入用户名" class="uesname" name="name" value="" oninput="if(value.length>=11)value=value.slice(0,11)"><br/>
2、改type值,用正则限定只输入数字
<input type="tel" placeholder="登录手机号码" class="phone_num phone_number" maxlength="11" oninput="this.value=this.value.replace(/[^0-9]/ig,'')" pattern="[0-9]\*">
二、当input的type为date时,placeholder不正常显示;
PC端对input 的date类型支持不友好,只有chrome支持且显示是“年/月/日”,firefox、IE11 都不支持;且PC端有很多日历控件可供使用可以完美解决这个问题。
移动端下,ios和安卓是支持的,但是当type类型是date的时候placeholder属性又会失效,一片空白了。
解决办法:
1、用两个input,一个type为text让其显示日期,另一个type为date并定位到第一个input上设置透明度为0;加事件获取日期并赋给第一个input;
2、结合css与js
css部分
用伪类去为input模拟一个placeholder
input[type="date"]:before{
content: attr(placeholder);
color:red;
}
js部分
失去焦点时设置placeholder属性,获取焦点时移除placeholder属性
var o = document.getElementById('date');
o.onfocus = function(){
this.removeAttribute('placeholder');
};
o.onblur = function(){
if(this.value == '') this.setAttribute('placeholder','我是日期');
};
三、移除input[number]的上下箭头
在chrome下
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
在firefox下
input[type="number"]{-moz-appearance:textfield;}
四、设置placeholder字体颜色
::-webkit-input-placeholder {
color:red;
}