如何镜像文本选择？

假设你有两个输入：如何镜像文本选择？

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

使得通过一些JavaScript魔术，任何你在输入1类型也将被放置在输入2。在这个意义上，input2“镜像”input1。

有没有一种方法可以“镜像”文本选择。所以如果我在input1中选择了一些文本，我怎么才能在input2中选择完全相同的文本呢？

我一直在看微软的TextRange对象和Mozilla等人使用的Selection对象，但整个混乱看起来很麻烦。有没有人做过这样的事情？

澄清：感谢迄今的回应。要清楚：我不是在问如何反映文本。我已经解决了那个问题。问题只是关于在input1中选择文本，并且还要选择input2中的相应文本。

来源

2009-08-25 ntownsend

就我所见，它在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>

来源

2009-08-25 21:04:11

我甚至不确定这些浏览器是否支持同时在页面上选择多个部分。 –

在Firefox中很好地工作。我不知道有多种选择是可能的。 – artlung

我应该澄清一下：在FF 3.5.2中测试并且效果很好。 – artlung

-1

如果你可以使用JQuery住，然后克隆可以做到这样：

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

来源

2009-08-25 20:38:00 Zed

你可以做你问（像我的回答here）的第一部分，而不是第二部分 - 它是一次只能有一个以上的有效选择范围。

来源

2009-08-25 20:38:49

如何镜像文本选择？

回答

相关问题