完美解决input[type=number]无法显示非数字字符的问题

在移动端webview实现的页面中，有数字的地方必须使用input type="number"类型的input，否则触发后的键盘为全键盘，而非数字键盘。但另外的一个问题是，input 为 type="number" 类型的无法显示非数字字符，比如：12/23中/。

成都创新互联专注于网站设计制作、成都网站制作、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户，用严谨的态度对待客户，用专业的服务创造价值，成为客户值得信赖的朋友，为客户解除后顾之忧。

只能采取另外的思路来解决，比如：显示的时候用非number类型的input或其它元素，当触发onfocus后，利用js 动态修改为number类型。

<input class="pg-page-num" type="text" name="" value="34/233" id="pageNum">
<input type="hidden" name="" value="25" id="totalPage">

<script type="text/javascript">
  var oPage = document.querySelector('#pageNum'),
    oTotal = document.querySelector('#totalPage'),
    sOldVal = '';

  oPage.addEventListener('focus', function () {
    this.type = 'number';
    sOldVal = this.value;
  }, false);

  oPage.addEventListener('blur', function () {
    var sVal = this.value;
    this.type = 'text';
    if (sVal != sOldVal) {
      this.value += '/' + oTotal.value;
    }
  }, false);
</script>

以上这篇完美解决input[type=number]无法显示非数字字符的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。

当前标题：完美解决input[type=number]无法显示非数字字符的问题
路径分享：https://www.cdcxhl.com/article18/gijcgp.html

成都网站建设公司_创新互联，为您提供网站建设、品牌网站建设、网页设计公司、网站策划、定制网站、微信小程序

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容