自动文本区域光标移动答案

【问题标题】：Automatic Textarea cursor movement自动文本区域光标移动
【发布时间】：2012-05-19 19:10:31
【问题描述】：

我的问题与 textarea 中的 Automatic newline in textarea 几乎相似，但我的上下文更复杂。我有多个具有 1 行属性的文本区域，因此给人一种在空中书写的印象（仅表示网站上没有边框的空白区域，因为我在 css 中将文本区域边框设置为 >>> 边框：0;） .

如果用户输入的文本已经到达textarea的行尾，我想使用JQuery或Javascript计算他/她何时自动移动到下面的下一个textarea。解决此问题的一种方法是尝试对字符进行计数，但不同的字符具有不同的宽度。

我正在考虑在 textareas 的边缘插入一个隐藏元素以作为 nexttextarea.focus() 事件的触发器，但我不知道如何实现这一点。

我尝试过四处游荡并考虑不同的技巧，但似乎只有一个是解决方案...尝试将每个字符存储在一个数组中，并为它们提供以像素为单位的默认空间...就像 ' a'=>0.7px,'b'=>0.9px 或类似的东西，如果它们是某个地方的列表（尽管看起来它在内存方面会花费很多开销，因为我必须这样做存储大写，小写字母和许多其他字符。）然后根据浏览器的宽度进行一些计算，如果它已被重新调整大小或不是完整大小，以确定 textarea 行宽何时在浏览器宽度边缘变满. （目前 textarea 的宽度是 100% 并且没有父级，因此会填充整个浏览器宽度）。

如果有人知道我可以完成此任务的复杂或简单方法，请帮助我。一个大问题是 IE 和 Mozilla 在调整浏览器窗口大小时会引入滚动条，而滚动条是我从不希望用户看到的（记住打字时的感觉） .

请原谅我如此冗长..只是想准确和详细。

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

这比看起来更难。尝试检查 textarea 的 scrollHeight 和 scrollWidth；如果他们改变了，文本就会溢出。此时，您可以将文本从当前文本区域的末尾移动到下一个文本区域的开头，直到滚动高度/宽度消失。

这是一个例子：

document.onkeyup = function(evt) {
    var event = evt || window.event;
    var target = event.target;
    var nextArea = target.nextSibling; // assumes no whitespace between textareas.
    var chars;
    if (target.tagName == 'TEXTAREA' && (target.scrollLeft || target.scrollTop)) {
        chars = 0;
        while (target.scrollLeft || target.scrollTop) {
            target.value = target.value.replace(/.$/, function(m0) {
                nextArea.value = m0 + nextArea.value;
                return '';
            })
            ++chars;
            target.selectionStart = target.value.length;
        }
        nextArea.focus();
        nextArea.selectionStart = chars;
    }

}

http://jsfiddle.net/L73RG/3/

请注意，一个完整的解决方案需要将它绑定到的不仅仅是keyup 事件，因为例如，用户可以使用上下文菜单进行粘贴。如果您发现可以在不触发事件的情况下修改框（例如通过顶级“编辑”菜单），您可能希望将其绑定到一些鼠标事件，甚至偶尔在计时器上运行它。

【讨论】：

查看了 jsfiddle.net 链接，但似乎有问题。在书写时，扩展了 textarea 宽度的单词只会在同一个 textarea 上换行。如果您写的内容超过 2 行，则滚动条会出现在焦点文本区域中。也许我没有完全理解代码，所以有解决办法吗？
@RedCoder，它在 chrome 上对我有用，虽然代码又快又脏，而且肯定可以改进。你使用的是什么浏览器？我将在该浏览器中尝试它，看看是否可以修复它。当前代码的一个问题是，如果空间不足，它会在中间打断单词，但这很容易解决。另一个问题是调整窗口大小，就像 Windows 记事本一样。
顺便问一下，我能问一下你为什么要这样做而不是只使用一个大的文本区域吗？这是一个有趣的谜题，但我真的看不出它有什么用处。
这是 mozilla 12.0....好的。让我给你实现的链接。检查来源。 www.redcoder.allalla.com
@RedCoder 将height: 1em; 添加到 CSS 中为我在 Firefox 中修复了它：jsfiddle.net/L73RG/2 基本上这个想法是，如果文本溢出可见的 textarea，则 textarea 将滚动。只要 textarea 滚动，就删除其中的字符并将它们添加到下一个 textarea 的开头。

【解决方案2】：

检查每个按键是否您的 textarea 内容溢出，并提供此问题的答案：Determine if an HTML element's content overflows

然后您必须删除多余的字符并将它们放入下一个textarea。大概一个一个，在每个字符移动后使用你的检查溢出功能，看看文本区域是否仍然溢出。

【讨论】：

【解决方案3】：

一种可能的解决方案是测量文本的大小。 Ext-JS 通过创建一个屏幕外绝对定位的 div 来做到这一点，为它提供您要测量的字体的样式属性，然后它们测量 div 本身。

您可以使用 Ext-JS 的代码作为灵感http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.TextMetrics

【讨论】：