开发时遇到的问题记录一下:移动端ios、Android中input框输入限制问题(ionic)

开发时遇到的问题记录一下:移动端ios、Android中input框输入限制问题(ionic)

IOS

input标签里:
type=“tel”: 直接调起ios的数字键盘(ios数字键盘没有小数点);删除小数点后一位时,小数点 直接删掉。
type=“number”: 全键盘可以任意输入,没有只能输入数字的限制

Android

type=“tel” :直接调起android的数字键盘,但是与ios的type="number"时类似,输入时没有限制。删除小数点后一位时,小数点直接删掉。
type=“number”: 只可输入数字和小数点,但是在真机测试时,删除小数点后一位时,光标直接移到小数点之前了。

 校验事件用的input、textInput、keydown
 input:校验数字输入问题,如保留一位小数等。
 textInput:校验使其输入只为数字及小数点,及校验禁止输入-、+、E、e(e为无理数2.71828)
 keydown:正常键盘字母的keycode都为229,无法判断禁用,可以判断下一项等周边的按键。(keyup也如此)

//keyCode为229 网上查说:好像是因为中文输入法还在处理,会给调用者先返回一个值,但是js中接受了值就不会再处理了,所以中文输入法下拿到的keyCode全部都是229。

对IOS用type=“number”,Android用type=“tel” 输入数据联合校验

//input (校验保留一位小数,且输入后小数点后一位转换为5)
getPoints(score) {
    score.value = score.value.toString().replace(/[^\d.]/g, '');   //ios没生效,android限制输入
    let data = score.value;
    if (data.toString().indexOf(".") < 0 && data != "") {
      this.inputPoint = parseFloat(data);
    } else if (data.toString().indexOf(".") > 0 && data != "") {
      let num;
      if (+data.toString().match(/\d+(\.\d{0,1})?/)[0].toString().split('.')[1] > 0) {
        num = +(data.toString().match(/\d+(\.\d{0,1})?/)[0].toString().split('.')[0] + '.' + 5);
        this.inputPoint = num;
        score.value = this.inputPoint;
      } else {
        this.inputPoint = parseFloat(data.toString().match(/\d+(\.\d{0,1})?/)[0].toString().split('.')[0]);
      }
    }
  }
  
  
//textInput
handleDisabled(event, score) {
    let data = score.value;
    if (event.data == "." && data.toString().indexOf(".") > 0) {
      event.preventDefault();
    }
    const invalidChars = ['-', '+', 'e', 'E'];
    if (invalidChars.indexOf(event.data) !== -1) {
      event.preventDefault();
    }
    //ios限制输入
    if (this.platform.is('ios')) {
      const numberChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
      if (event.data !== 'Backspace' && event.data !== '.' && numberChars.indexOf(event.data) === -1) {
        event.preventDefault();
      }
    }
  }
  
  
//keydown
handleKeydown(event) {
//禁用周边键可用
    if (event.keyCode === 9) {
      event.preventDefault();//下一项
    }
  }

如有问题或别的方法,劳烦指点!

上一篇:ionic ModalController二次弹出模态框


下一篇:Ionic+Angular实现中英国际化(附代码下载)