javascript - 如何在 JavaScript 中使用单个函数进行多个输入

Question

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

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

  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 ，这可能会令人困惑 - 最好使用精确的变量名称)