Question

我希望链接输入框，这样当你在一个中键入内容时，它会显示在另一个中（反之亦然）。这是一个“codepen”，显示我目前是如何做的。

这很简单，但我觉得应该有一种更简单的方法来实现这一目标。我在codepen中说明了这种方法的问题。您会注意到用一个字符串填充其中一个框的按钮。即使内容已更改，“onchange”事件也不会运行，因此其他输入框不会更新。

有没有更简单的方法可以解决我一直遇到的问题？

Answer 1

这正是databinding要解决的问题。那里有很多图书馆，但目前最受欢迎的是AngularJS（谷歌）。 http://angularjs.org/

请参阅演示：http://jsfiddle.net/34ZCs/2/两个输入都绑定到变量yourName：

<div ng-app>
    <div>    
        <input type="text" ng-model="yourName" placeholder="A">
        <input type="text" ng-model="yourName" placeholder="B">
    </div>
</div>

Answer 2

使用＆＃34; onkeyup＆＃34;而不是＆＃34; onchange＆＃34;。然后下一个文本框将立即更新。

做这样的事情

<input type="text" name="a" id="a" onkeyup="fillBoth('a','b')" onfocus="fillBoth('a','b')" />
<input type="text" name="b" id="b" onkeyup="fillBoth('b','a')"
onfocus="fillBoth('a','b')"/>
<button type="button" id="clicky" onclick="fillWithX()">click here for xxx</button>

你应该像这样更新JavaScript。

function fillWithX() {
    document.getElementById('a').value = 'xxx';
  document.getElementById('a').focus();
}

Answer 3

事件处理程序的轻微更改可能会起到作用。看看：http://codepen.io/anon/pen/budnp/

<input type="text" name="a" id="a" onchange="fillBoth('b', 'a');" />
<input type="text" name="b" id="b" onchange="fillBoth('a', 'b');" />
<button type="button" id="clicky" onclick="fillWithX()">click here for xxx</button>

和脚本：

function fillBoth(copyTo, copyFrom) {
    document.getElementById(copyTo).value = document.getElementById(copyFrom).value;
}

有没有更好的方法来“链接”文本输入？

3 个答案: