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