javascript - 在JS中动态改变表单的值

Question

Here 是一个示例 jsFiddle。我有两个字段.. opp3 和 opp4。用户可以修改 opp4 中的文本，但我希望 opp3 中的文本在用户更改 opp4 中的文本时动态更改。

我看到 this 动态更改文本的解决方案，但我不能完全使用它，因为我正在创建一个 greasemonkey 脚本(并且不能编辑 html，只能添加 JS)并且我只想更改字段的一部分，而不是整个字段。

HTML:

<input id="opp3" maxlength="120" name="opp3" size="40" tabindex="1" type="text" style="cursor: auto; background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;" readonly>

<br><br>

<input autocomplete="off" id="opp4" maxlength="255" name="opp4" onchange="getElementByIdCS('opp4_lkid').value='';getElementByIdCS('opp4_mod').value='1';" size="40" tabindex="2" type="text">

JS:

document.getElementById('opp3').value = "Text <VALUE FROM OPP4> More Text";
document.getElementById('opp4').value = "Field Text Here";

Answer 1

您可以在 opp4 输入上使用事件监听器来实现此目的。

var opp3 = document.getElementById('opp3')
opp3.value = "Text <VALUE FROM OPP4> More Text";
var opp4 = document.getElementById('opp4')
opp4.value = "Field Text Here";

opp4.addEventListener('input', function () {
    opp3.value = this.value;
});

<input id="opp3" maxlength="120" name="opp3" size="40" tabindex="1" type="text" style="cursor: auto; background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;" readonly>
    
   <br><br>
       
       <input autocomplete="off" id="opp4" maxlength="255" name="opp4" size="40" tabindex="2" type="text">