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

【问题标题】：How to use single function for multiple inputs in javascript如何在javascript中使用单个函数进行多个输入
【发布时间】：2019-04-23 07:48:09
【问题描述】：

我想知道如何对 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} >

如何使一个函数同时用于两个输入。

【问题讨论】：

标签： javascript jquery html forms function

【解决方案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，这可能会造成混淆——最好使用精确的变量名称）

【讨论】：

【解决方案2】：

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

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

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

如果您希望无论活动元素如何都执行相同的过程，那么event.target 属性包含对该元素的引用...

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

希望对您有所帮助。 :)

【讨论】：