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

Question

我想在单击下拉菜单并在以下 HTML 表单中使用 onchange() 函数时将值 - 值和值 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 或值时不会立即更改。

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

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

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

HTML FORM - Change Parts Of Readonly String Field Using onchange()

html

javascript

forms

onchange