Question

我想知道如何对javacript中的两个输入使用单一方法。

我有一个具有两个输入字段的表单，调用一个函数来格式化currecny。我需要知道如何为两个不同的输入申请相同的功能。

  formatCurrency(e){
    var myinput = e.target.value;
      var val = myinput;
      val = val.replace(/[^0-9\.]/g,'');      
      if(val != "") {
        var valArr = val.split('.');
        valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
        val = valArr.join('.');
      }      
     document.getElementById("samount").value = val;
  }

  formatRCurrency(e){
    var myinput = e.target.value;
      var val = myinput;
      val = val.replace(/[^0-9\.]/g,'');      
      if(val != "") {
        var valArr = val.split('.');
        valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
        val = valArr.join('.');
      }      
      document.getElementById("tamount").value = val;
  }

  <input type="text" id="samount" name="samount" class="form-control"  @keyup=${this.formatSCurrency} >
  <input type="text" id="tamount" name="tamount" class="form-control" @keyup=${this.formatRCurrency} >

如何使两个输入都使用单一功能。

Answer 1

e.target指的是您正在操作的<input>，因此只需更改

document.getElementById(...).value = val;

到

e.target.value = val;

，您将可以对两个输入使用相同的功能。可能也不再需要id。

<input type="text" name="samount" class="form-control"  @keyup=${this.formatCurrency} >
<input type="text" name="tamount" class="form-control" @keyup=${this.formatCurrency} >

和

formatRCurrency(e){
  var value = e.target.value;
  value = value.replace(/[^0-9\.]/g,'');      
  if(value !== "") {
    var valArr = val.split('.');
    valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
    val = valArr.join('.');
  }      
  e.target.value = val;
}

（请注意，您的myinput变量实际上包含一个字符串，而不是一个HTMLInputElement，这可能会造成混淆-最好使用精确的变量名）

Answer 2

实现此目的的一种简单方法是仔细检查目标元素的id属性并采取相应的措施。例如...

function eventHandler(e) {
    var targetID = e.target.id;

    switch(targetID) {
        case "samount":
            /* 'samount' specific process */
            break;
        default:
           /* 'tamount' specific process */
    }
}

如果您希望不管活动的Element都执行相同的过程，则event.target属性包含对该元素的引用...

function eventHandler(e) {
    var element = e.target;
    var val = element.value;
    // process 'val' etc ....
    element.value = new_value;
}

希望有帮助。：）

如何在JavaScript中将单个函数用于多个输入

2 个答案: