javascript - jQuery:不使用 val() 同步两个文本字段

Question

我的问题类似于this或this问题。

但是，所有答案都使用 jQuery 的 val 函数在字段之间复制值。

我无法使用val，因为源输入字段将为只读。

因此，我想捕获源输入字段上的键盘事件，并根据这些事件填充目标文本字段。可以吗？

我希望这样的事情能够做到这一点，但它不起作用。

$(".src").keyup(function(e){
    $(".target").trigger(e);
});

有什么想法吗？

Answer 1

你的问题没有多大意义。你说:

the source input field will be readonly and thus will only be able to listen to keyboard events.

...但这没有多大意义。如果它是只读的，则您无法聚焦该字段...这意味着您无法为其提供键盘事件。无论如何，您始终可以获取和设置字段的值，即使它是只读或禁用。如果您不想使用 jQuery 的 val() - 则使用纯 JS。

$(".src").keyup(function(e){
    document.getElementsByClassName('target')[0].value = e.target.value;
});

更新:现在我想我理解你的问题了。您的主要目标是希望通过隐藏聚焦字段并写入另一个字段来修改插入符号的颜色。不知道你为什么要这样做，因为我向你保证你的用户不在乎，并且你冒着干扰用户体验的风险......当我输入此消息时，我什至没有注意到插入符号的颜色Chrome...但是，我有一种感觉，你仍然认为你的输入比其他人更特别。我对那些尝试将光标放在输入中较早位置以修复拼写错误的用户感到同情......我离题了。

创建一个输入，而不是 2 个输入，将其不透明度设置为 0，并在值发生变化时将整个值写入 DIV。这有很多好处:

1. 您无需实际查看即可获得输入的许多默认行为(例如，光标悬停在桌面上、键盘导航等)。
2. 您的表单仍然可以执行普通提交，无需复制值或任何其他 JavaScript 怪异。
3. 任何其他代码、验证脚本等都不需要更改 - 输入仍然会获取值并发出所有事件。

https://jsfiddle.net/2sp92bpy/1/