如何镜像文本选择?

时间:2009-08-25 20:32:41

标签: javascript html dom selection textrange

假设您有两个输入:

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

通过一些JavaScript魔术,你在input1中输入的任何内容也将被放入input2中。在这个意义上,input2“镜像”输入1。

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

我一直在关注微软的TextRange对象和Mozilla等人使用的Selection对象,但整个混乱看起来非常麻烦。以前有没有人做过这样的事情?

澄清:感谢目前为止的回复。要明确:我不是在问如何镜像文本。我已经解决了那个问题。问题仅在于选择input1中的文本并在input2中选择相应的文本。

3 个答案:

答案 0 :(得分:1)

据我所知,在Firefox和Opera中非常容易。谷歌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>

答案 1 :(得分:0)

您可以执行您询问的第一部分(例如我的回答here),但不是第二部分 - 一次只能有一个以上的有效选定范围。

答案 2 :(得分:-1)

如果您可以使用JQuery,那么可以通过以下方式进行克隆:

$("#input1").keyup(function() { 
  $("#input2").val( $("#input1").val() );
}