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

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;

并且您将能够对两个输入使用相同的功能。可能也不再需要ids了。

<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这可能会造成混淆-最好使用精确的变量名）