Question

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

我看到 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输入上使用事件监听器来实现此目的。

＆＃13;

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;
});

＆＃13;

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

＆＃13;

Answer 2

您可以完成类似的结果减去事件监听器，如下所示：

var inputs = document.getElementsByTagName('input');
var opp4 =   document.getElementById('opp4');
opp4.value = "Field Text Here";

var opp3 = document.getElementById('opp3');
opp3.value = "Text <VALUE FROM OPP4> More Text";  
inputs[1].onchange = function(){ 
          opp3.value = opp4.value;
          };

请参阅演示here

不可否认，由于事件更改同时发生，因此使用eventlistener会有点凉爽。我喜欢那种效果，但用户怎么样？他们会发现它有趣还是令人不安的分心？我的解决方案表现出与http://jsfiddle.net/4PAKE/

提出问题的人相同的动态行为

在JS中动态更改表单的值

2 个答案: