在单个或多个文本区域和文本框中使用多个插入符号答案

【问题标题】：Using multiple carets in single or multiple textareas and textboxes在单个或多个文本区域和文本框中使用多个插入符号
【发布时间】：2013-07-11 11:49:54
【问题描述】：

我想我可能已经知道这个问题的答案了，但是……

是否可以在一个文本框中有两个插入符号，或者有两个单独的文本框同时聚焦，允许用户同时输入这两个文本框？

我知道您可以通过添加 keydown 侦听器并使它们的值匹配来模拟这一点，但我希望两个字段中都有可见的插入符号。

如果没有，有人对如何模拟这个有任何想法吗？

【问题讨论】：

如何模拟插入符号或如何模拟其他内容？
"... two carets in a single textbox ..." 为什么在一个文本框中需要两个插入符号？
这是Sublime Text 2 的最佳功能之一，我很想用 Javascript 来做这件事，但从未找到解决方案。这将是一个非常方便的工具..
@JustAnil 说了什么...
@lededje 在找到合适的解决方案之前，您可以使用this snippet。它没有任何视觉效果，但在两个文本区域之间切换时，光标位置和选择被保留。 sn-p 在 FF22、IE10 和 Opera12 中运行良好，但在 Chrome27 中运行不佳。

标签： javascript jquery html forms

【解决方案1】：

Ace 编辑器支持多个光标/插入符号，例如 Sublime Text：

http://ajaxorg.github.io/ace/

现场演示中的

Ctrl+Click（或在 OS X 上为 Cmd(⌘)+Click）在该页面上获取多个光标并输入！

您也可以选择一堆代码并使用 Tab 缩进一个制表符空间，或 Shift+Tab 缩进一个制表符空间.

【讨论】：

优秀的插件！看起来它完全符合提问者的要求。
这是一个令人印象深刻的插件，我已经分叉了它，但它并不是我想要的。这是作为一个代码编辑器的重量，而我想要的只是一个文本区域或输入框。如果没有人想出更好的答案，我会将这个答案标记为正确，因为我认为它会帮助这个问题的大多数其他观众。
@lededje 看起来像是开源的，所以您或许能够了解它是如何做到的？
@barlop 我已经花了几个小时查看代码，但仍然没有找到答案。我没有时间再看下去了。

【解决方案2】：

查看@Sly_cardinal 的答案，这可以满足您的所有需求，它更像是一个“重型”解决方案，但肯定是您获得这样的东西的唯一方法。它可以通过一些工作来定制，但它绝对是正确的答案。

+1 @Sly_cardinal - 正是我一直在寻找的！

文本区域的渲染是由用户代理（浏览器）处理的，我们可以控制样式、外观和感觉，但遗憾的是不能控制功能（无论如何都可以做多个光标）。

太糟糕了..这将是惊人的！

【讨论】：

【解决方案3】：

试试

<html>
<body>
    <input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()"><br>
    <span id="lblValue">The text box contains: </span>
        <input id="secvalue" type="text">
</body>

<script>
    function edValueKeyPress()
    {
        var edValue = document.getElementById("edValue");
        var s = edValue.value;

        var lblValue = document.getElementById("secvalue");
        lblValue.value = s;


    }
</script>    

</html>

我想这是你的要求

【讨论】：

不起作用.. jsfiddle.net/jyXJr 这不是 OP 所要求的，他希望 multiple cursors 在同一文本区域内。