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

Question

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

我一直在尝试使用 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 时，

处的值不会立即更改。

Answer 1

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

$(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">

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