<input type="number"> 文本框出现上下小箭头 以及可以输入除文字以外的符号

下面是写登录界面 手机号的一部分,发现在输入框的右端会出现小箭头

 

<div>
　　<input class="textbox" type="number" min="11" max="11" placeholder="手机号" id="phoneno">
</div>

//解决出现小箭头的代码

//该代码控制箭头不显示
<style>
                input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
                -webkit-appearance: none;} input[type="number"] {
                -moz-appearance: textfield;}

  </style>

 

//接着我们会发现去掉箭头后还会出现，可以输入除数字以外的一些特殊字符
<div>
　　<input class="textbox" type="number" min="11" max="11" placeholder="手机号" 
     id="phoneno" οnkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
     style="ime-mode:Disabled" >
</div>

//这是我们可以加上

　　　οnkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
     style="ime-mode:Disabled" 
//这样设置以后再去看就只允许输入数字了，而且输入该值的时候输入法是禁用的，不允许调

//之后我们会发现仍可以输入 ...  ---
//这是需要写一个函数控制其不可输入那几个符号