自动文本框光标移动

Question

自动文本框光标移动

3

我的问题与 textarea中的自动换行几乎相似，但我的上下文更加复杂。我有多个文本区域，它们具有1行属性，因此给人们留下了在空气中写作的印象（只是网站上没有边框的空白区域，因为我已经在CSS中设置了文本区域边框为 >>> border: 0; ）。

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

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

我尝试过各种hack方法，但只有一种方法似乎是解决方案...尝试将每个字符存储在数组中，并为它们赋予默认的像素空间值，如'a'=>0.7px,'b'=>0.9px之类的东西，如果有列表的话（尽管看起来会在存储大写、小写字母和许多其他字符方面占用大量内存）。然后根据浏览器的宽度进行一些计算，如果已经调整了大小，则确定当浏览器宽度边缘处的文本区域行宽度变满时。（目前，文本区域宽度为100％，没有父级，因此填充整个浏览器宽度）。

如果有人知道我可以完成这个复杂或简单的方法，请帮助我。一个大问题是，如果调整浏览器窗口大小，IE和Mozilla会引入滚动条，而滚动条是我永远不想让用户看到的（记住在空气中输入的印象）。

对不起，我说得太详细了...只是想保持准确和详细。

- William The Dev

3个回答

0

在每次按键时检查您的文本区域内容是否溢出，并使用此问题提供的答案：确定HTML元素的内容是否溢出

然后，您需要删除多余的字符并将它们放入下一个textarea中。可能需要逐个字符地进行操作，并在移动每个字符后使用您的检查溢出函数来查看文本区域是否仍然溢出。

- Matthew

0

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

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

- Ruan Mendes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dagg Nabbit · Accepted Answer

这比看起来要难一些。尝试检查文本区域的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”事件上，因为用户可以使用上下文菜单粘贴，例如。您可能希望将其绑定到某些鼠标事件，甚至在定时器上偶尔运行它，如果您发现该框可以在不触发事件的情况下修改（例如通过顶级“编辑”菜单）。