表单输入input number

移除input number上的spinner HTML 5 的表单中有着丰富的input种类,比如说input[type="number"],就可以保证用户输入数字,但是input也有一些不好的地方——带有 spinner。

一、spinner 是什么?

简单来说spinner就是数字输入框右边的上下箭头。

二、怎么去除

方法1:

/*input number remove spinner*/
input[type="number"]::-webkit-textfield-decoration-container {
    /*background-color: #fff;    */
}
 input[type="number"]::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;    /*outer */
}

方法二:

 将type="number"改为type="tel",同样是数字键盘,但是没有箭头。

input number maxlength 失效 移动端使用


   <input type="number"  oninput="checkTextLength( this , 5)"> 

function checkTextLength(obj, length) {   
    
           if(obj.value.length > length)   {   
                
               obj.value = obj.value.substr(0, length);   
           }   
   
}

oninput 事件

定义和用法
oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
提示: 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。




<p>在文本框中尝试输入触发函数。</p>
<input type="text" id="myInput" oninput="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myInput").value;
    document.getElementById("demo").innerHTML = "你输入的是: " + x;
}
</script>

  

转载于:https://my.oschina.net/oneboi/blog/830194

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值