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

【问题标题】：HTML FORM - Change Parts Of Readonly String Field Using onchange()HTML FORM - 使用 onchange() 更改部分只读字符串字段
【发布时间】：2019-09-15 06:57:28
【问题描述】：

单击下拉菜单并在以下 HTML 表单中使用 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 时不会立即更改。

【问题讨论】：

请您分享您的 HTML 和 JavaScript，以便我们了解您到目前为止所做的尝试。

标签： javascript html forms onchange

【解决方案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">

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

【讨论】：