javascript - HTML FORM - 使用 onchange() 更改部分只读字符串字段

Question

当单击下拉列表并在以下 HTML FORM 中使用 onchange() 函数时，我想将值 - 值和值 2 分配给 DATAID 和 DEPNUM 正在分配的位置是包含字符串的只读字段的一部分。我的目标是创建一个只读字符串，该字符串将包含我从下拉字段中选择的值，全部组合在一个字符串中并用下划线分隔。

我一直在尝试使用 onChange 方法“myFunction()”

<input name="_1_1_2_1" tabindex="-1" class="valueEditable" id="myInput" onchange="myFunction()" type="text" size="32" value="...">

这看起来像：

function myFunction()
{
    var x = document.getElementById("myInput").value;
    document.getElementById("demo").innerHTML = x;
}

最终我在段落上运行它：

<p id="demo" value="DATAID_DOCTYPE_DEPNUM_NTA">DATAID_DOCTYPE_DEPNUM_NTA</p>

问题是价值在

在我更改 value2 或 value 时不会立即更改。

标签： javascripthtmlformsonchange

Answer 1

您可以为两个输入字段绑定两个事件侦听器，并通过以下方法更新只读文本字段值。

$(document).ready(function(){
  $('#field1').keyup(function() {
    updatedReadonlyFieldVal($(this), 0);
  });
  
  $('#field2').keyup(function() {
    updatedReadonlyFieldVal($(this), 2);
  });
  
  function updatedReadonlyFieldVal(elem, index) {
    let val = elem.val();
    let destVal = $('#destination').val();
    let splittedDestVal = destVal.split('_');
    splittedDestVal[index] = val;
    $('#destination').val(splittedDestVal.join('_'));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="field1" name="field1">
<input type="text" id="field2" name="field2">

<input value="DATAID_DOCTYPE_DATANUM" readonly id="destination">

如果您有任何疑问，请随时告诉我。