input 的设定

1、设定input输入框的长度
     

<input type="number"  style="width:50px" /> 
//里面的style="width:50px"通过更改width来改变input输入框的长度

2、限制input最大长度         

<input type="text"  maxlength="5" />   //可以

          <input type="number"  maxlength="5" />  //没有效果

          <input type="number" οninput="if(value.length>5) value=value.slice(0,5)" /> //js控制,可以

          <input type="tel"  maxlength="5" />  //tel类型,可以

          此外,tel类型的input在ios上会调出全数字键盘,而number类型的input则会调出带有标点符号的键盘。

3、限制input输入框为纯数字:
         1、onkeyup = "value=value.replace(/[^\d]/g,'')"

<input type="number" onkeyup = "value=value.replace(/[^\d]/g,'')"/>

         使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母

          2、onchange = "value=value.replace(/[^\d]/g,'')"

<input type="number" onchange = "value=value.replace(/[^\d]/g,'')"/>

          使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应

          3、oninput = "value=value.replace(/[^\d]/g,'')"

<input type="number" oninput = "value=value.replace(/[^\d]/g,'')"/>

          使用 oninput 事件,完美的解决了以上两种问题,暂时还没有出现其它问题。

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值