onkeyup input前端限制输入_input onkeyup-优快云博客

本文链接：https://blog.youkuaiyun.com/gengtieguang/article/details/117297688

本文介绍了如何在前端使用HTML和JavaScript实现对input元素的限制，确保用户只能输入数字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input 限制输入

<!-- οnkeyup="非数字替换并保留两位小数"  -->
<input  
	onkeyup="this.value=this.value.replace(/^\D*([1-9]\d*\.?\d{0,2})?.*$/,'$1')" 
    onafterpaste="this.value=this.value.replace(/^\D*([1-9]\d*\.?\d{0,2})?.*$/,'$1')" 
    [maxlength]="10"
    placeholder="Other Amount" [(ngModel)]="money" class="input" appTwoDigitDecimaNumber  
 />

<!-- οnkeyup="非数字替换并保留两位小数,首位可为小数点"  -->
 <input 
    onkeyup="value.includes('.')?value=(value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')).substring(0, value.indexOf('.') + 3):value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')" 
    class="input" 
    [placeholder]="inputTips" 
    [(ngModel)]="amount" 
    maxlength="12"
 />

数字处理

changeAmount() {// 原有金额问题处理
    let str = (this.amount + '');
    let num  = undefined;
    if ((this.amount + '').includes('.')) {
      if ((this.amount + '').charAt(0) === '.') {//第一位是小数点时补零 ,e.g.  .33 => 0.33
        this.amount =
          '0' +
          (this.amount + '')
            .replace(/[^\d^\.]+/g, '')
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
            .substring(0, str.indexOf('.') + 3);
      }

      this.amount = (this.amount + '')
      .replace(/[^\d^\.]+/g, '')
      .replace('.', '$#$')
      .replace(/\./g, '')
      .replace('$#$', '.')
      .substring(0, (this.amount + '').indexOf('.') + 3);

      if(Number(this.amount) > 0){//去除小数点前多余0 ,e.g.  00009999.33 => 9999.33
        for(let i = 0; i < str.length-1; i++){
          if(str[i] !== '0'){
            num = i;
            break;
          }
        }
        this.amount = (this.amount + '').substring(num);
      }else{
        this.amount = (this.amount + '').replace(/^0+\./g,'0.');//去除小数点前多余零 , e.g.  0000000.33 => 0.33
      }
    } else {
      this.amount = (this.amount + '').replace(/^[0]+/, '');//去除整数前多余零 , e.g.  00000009999 => 9999
      this.amount = (this.amount + '')
        .replace(/[^\d^\.]+/g, '')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.');
    }
  }

  IptBlur(){//尾数小数点处理
    this.changeAmount();
    if((this.amount+'').charAt((this.amount+'').length-1) === '.'){
      this.amount = (this.amount+'').substring(0, (this.amount + '').indexOf('.'));//去除尾数多余点 , e.g.  9999. => 9999
    }else{  
      if((this.amount + '').includes('.')){
        if ((this.amount + '').charAt(0) === '.') {
          this.amount =
            '0' +
            (this.amount + '')
              .replace(/[^\d^\.]+/g, '')
              .replace('.', '$#$')
              .replace(/\./g, '')
              .replace('$#$', '.')
              .substring(0, (this.amount + '').indexOf('.') + 3);
        }
        this.amount = (this.amount + '').replace(/^0+\./g,'0.');//去除小数点前多余零
      }else{
        let str = this.amount + '';
        this.amount = str.replace(/^[0]+/, '');//去除整数前多余零
      }
    }
  }