表单输入input number

最新推荐文章于 2023-01-09 15:36:47 发布

weixin_33910460

最新推荐文章于 2023-01-09 15:36:47 发布

阅读量144

点赞数

原文链接：https://my.oschina.net/oneboi/blog/830194

版权

为什么80%的码农都做不了架构师？>>>

移除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