zoukankan      html  css  js  c++  java
  • h5 调起ios数字键盘的坑,限制特殊字符输入方案

     最近有个需求是利率只允许输入数字和小数点,用以下

    <input type="number" pattern="[0-9]*">

    在ios会调起数字键盘,但是左下角竟然是空不是“.”! 

    这个坑相信很多移动端h5开发会遇到,需支持小数点那就不能调起这种键盘了,那只能调起以下键盘

     <input type="number">

    但是问题又来了ios系统的type="number"竟然不能自动限制输入特殊字符!

    那只能对这个键盘输入做限制特殊字符输入了!有以下两种方案限制(用的vue框架)

    方案一:

    <input type="number" @keydown="preventNotNumber($event)">
    
    methods: {
        isBackspace(keyCode) {
          return keyCode === 8;
        },
        isDot(keyCode) {
          return keyCode === 46 || keyCode === 110 || keyCode === 190;
        },
        isNumber(keyCode) {
          return (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
        },
        preventNotNumber(event) {
             var keyCode = event. keyCode;
             if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {
                  // 其他按键
                  event.preventDefault();
                  event.stopPropagation();
                  return false;
             }
         }
    }

    但是这个方案还有坑,有些键值竟然是相同的!例如键“2”和键“@”的keyCode都是50!

     方案二:

    <input type="number" @keydown="preventNotNumber($event)">

    methods: { isBackspace(keyValue) { return keyValue === 'Backspace'; }, isDot(keyValue) { return keyValue === '.'; }, isNumber(keyValue) { return (keyValue >= 0 && keyValue <= 9); }, preventNotNumber(event) { var keyValue = event.key; if (!calculator.isBackspace(keyValue) && !calculator.isDot(keyValue) && !calculator.isNumber(keyValue)) { // 其他按键 event.preventDefault(); event.stopPropagation(); return false; } } }

     这个方案是直接对比按键值,虽然有点不是很好,但是毕竟能解决问题,限制除“.”外其他特殊字符的输入!

     

  • 相关阅读:
    .ellipsis 超过的部分显示省略号
    js 里面上一页和下一页
    CSS让你的IE浏览器崩溃(Crash your IE)作者:雪候鸟 来源: 风雪之隅
    元素居中显示
    jquery Carousel
    tabs 选择加载
    弹出窗
    下拉广告`
    opacity
    小波分析实验: 实验1 连续小波变换
  • 原文地址:https://www.cnblogs.com/peter-web/p/9400166.html
Copyright © 2011-2022 走看看