javascript - 如何镜像文本选择?

标签 javascript html dom selection textrange

假设您有两个输入:

<input id="input1" type="text"/><input id="input2" type="text"/>

这样,通过一些 JavaScript 魔法,您在 input1 中键入的任何内容也会被放入 input2 中。从这个意义上说,input2“镜像”input1。

有没有一种方法可以“镜像”文本选择。因此,如果我在 input1 中选择一些文本,如何才能在 input2 中选择完全相同的文本?

我一直在研究 Microsoft 的 TextRange 对象和 Mozilla 等人使用的 Selection 对象,但整个困惑看起来相当麻烦。以前有人成功做过类似的事情吗?

澄清:感谢您迄今为止的回复。需要明确的是:我不是问如何镜像文本。我已经解决了这个问题。问题只是选择 input1 中的文本并选择 input2 中的相应文本。

最佳答案

据我所知,这在 Firefox 和 Opera 中非常简单。 Google Chrome 和 IE 则不然。这是在 FF 中运行的代码:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<input type="text" size="40" id="sel-1" value="Some long text">
<input type="text" size="40" id="sel-2" value="Some long text">

<script type="text/javascript">
var sel_1 = document.getElementById("sel-1");
var sel_2 = document.getElementById("sel-2");

document.onmousemove = function () {
    sel_2.selectionStart = sel_1.selectionStart;
    sel_2.selectionEnd   = sel_1.selectionEnd;
}
</script>
</body>
</html>

关于javascript - 如何镜像文本选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1330805/

相关文章:

c# - 检查 DOM 是否静止

javascript - 如何在javascript中替换字符串的一部分

javascript - Raphael JS 翻转图像

javascript - 重新排序计算数组上的索引?

javascript - 重定向控制

javascript - $ ('selector' ) 和 $ ('selector' )[0] 在 jquery 中的区别

javascript - 如何在 afterEach 中打印 jasmine 测试规范?

javascript - 鬼场不消鬼

html - css 2 列左侧仅按图像宽度固定,右侧 col 占据容器宽度的其余部分

javascript - 如何使用 JavaScript 获取 HTML 中 <div> 中包含的 Paragraph 元素的值