Javascript 自动文本区域光标移动

我的问题几乎与textarea相似，但我的上下文更复杂。我有多个textarea，它们有一个1行属性，因此给人一种在空中书写的感觉（只是指网站上没有边框的空白区域，因为我在css中将textarea边框设置为>>>border:0；）

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

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

我试着四处游荡，思考不同的黑客，但似乎只有一个是解决方案。。。尝试将每个字符存储在一个数组中，并以px为单位为它们提供默认的空格取值……比如'a'=>0.7px，'b'=>0.9px或者类似的东西，如果它们是某个列表的话（尽管看起来在内存方面需要很多开销，因为我必须存储大写字母、小写字母和许多其他字符）然后根据浏览器的宽度（如果已重新调整大小或未调整全尺寸）进行一些计算，以确定textarea行宽度何时在浏览器宽度边缘变为全宽。（目前，textarea宽度为100%，没有父项，因此填充整个浏览器宽度）

如果有人有一个复杂或简单的方法，我可以做到这一点，帮助我的想法。一个大问题是，IE和Mozilla在重新调整浏览器窗口大小时会引入滚动条，而滚动条是我永远不想让用户看到的（记得在稀薄的空气中打字的印象）

---

请原谅我这么啰嗦。我只是想说得准确而详细。

如果您的文本区的内容充斥着这个问题的答案，请检查每个按键：

---

然后，您必须删除多余的字符，并将它们放入下一个

textarea

。在移动每个字符后，可能会逐个使用检查溢出功能查看文本区域是否仍然溢出。

一个可能的解决方案是测量文本的大小。ExtJS通过创建一个屏幕外绝对定位的div来实现这一点，为它提供想要测量的字体的样式属性，并测量div本身

---

您可以使用Ext JS的代码作为灵感

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

下面是一个例子：

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;
    }

}​

---

请注意，一个完全有效的解决方案需要将其绑定到不仅仅是

keyup

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

签出了jsfiddle.net链接，但它似乎有问题。在书写时，扩展了文本区域宽度的单词只会进入同一文本区域的新行。如果您写入的行数超过2行，则会显示聚焦文本区域的滚动条。也许我没有完全理解代码，那么有没有解决办法？@RedCoder，它在chrome上对我很有效，尽管代码快速而肮脏，而且肯定可以改进。你用的是什么浏览器？我会在那个浏览器里试试，看看能不能修好。当前代码的一个问题是，如果它用完了空间，中间会中断单词，但这很容易修复。另一个问题是调整窗口的大小，一个windows记事本。顺便问一下，你为什么要这样做而不是只使用一个大的文本区域？这是一个有趣的谜题，但我看不出它有什么用处。它是mozilla 12.0…好的。让我给你实现的链接。检查来源。www.redcoder.allalla。com@RedCoder增加

高度：1米

到CSS在Firefox中为我修复了它：基本上的想法是，如果文本溢出可见文本区域，文本区域将滚动。只要文本区域被滚动，就从中删除字符并将其添加到下一个文本区域的开头。