当前位置： 文江博客话题详情

如何镜像文本选择？

发布于 2024-08-03 11:12:54 字数 480 浏览 5 评论 0原文

假设您有两个输入：

和 < /code>

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

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

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

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

原文

Say you have two inputs:

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

such that through some JavaScript magic, anything you type in input1 will also be put in input2. In this sense input2 "mirrors" input1.

Is there a way that I can also "mirror" text selection. So if I select some text in input1, how can I have the exact same text in input2 also be selected?

I've been looking at Microsoft's TextRange object and the Selection object used by Mozilla et al, but the whole mess seems pretty cumbersome. Has anyone had any success doing something like this before?

CLARIFICATION: Thanks for the responses so far. To be clear: I'm not asking how to mirror the text. I've already solved that one. The question is only about selecting the text in input1 and having the corresponding text in input2 also be selected.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

并安 2024-08-10 11:12:54

据我所知，这在 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>

It's very easy in Firefox and Opera as far as I see. Google Chrome and IE not so much. Here's the code that works in 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>
回复 原文
烟花易冷人易散 2024-08-10 11:12:54

您可以执行您询问的第一部分（就像我的回答此处），但不是第二部分 - 只是一次不可能有多个活动选定范围。

You can do the first part you ask about (like my answer here), but not the 2nd part - it's just not possible to have more than one active selected range at a time.

回复 原文
一张白纸 2024-08-10 11:12:54

如果您可以接受使用 JQuery，那么可以通过以下方式完成克隆：

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

If you can live with using JQuery, then cloning can be done this way:

$("#input1").keyup(function() { 
  $("#input2").val( $("#input1").val() );
}
回复 原文
~没有更多了~

关于作者

霓裳挽歌倾城醉

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文