Question

我的问题与textarea中的Automatic newline in textarea几乎相似，但我的背景更复杂。我有多个textareas，它们有1行属性，因此给人一种空中写作的印象（只是意味着网站上没有边框的空白区域，因为textarea边界我在css中设置了＆gt;＆gt;＆gt; border： 0;）。的

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

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

我已经尝试过四处寻找并考虑不同的黑客，但只有一个似乎是解决方案...尝试将每个角色存储在一个数组中并给它们在px中取值的默认空间...比如' a'=＆gt; 0.7px，'b'=＆gt; 0.9px 或类似的东西，如果它们是某个地方的列表（虽然它看起来像内存方面需要很多开销，因为我会必须存储大写字母，小写字母和许多其他字符。）然后根据浏览器的宽度进行一些计算（如果已经重新调整大小）或者不是完整大小以确定textarea行宽何时在浏览器中变满宽边。（目前textarea宽度为100％且没有父级因此填充整个浏览器宽度）。

如果有人知道复杂或简单的方法我可以做到这一点，请帮助我。一个很大的问题是，如果重新调整浏览器窗口大小，IE和Mozilla会引入滚动条，滚动条是我永远希望用户看到的内容（记住输入空气的印象）

请原谅我这么冗长。只是想要准确而详细。

Answer 1

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

以下是一个例子：

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

Answer 2

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

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

Answer 3

可能的解决方案是测量文本的大小。 Ext-JS通过创建一个绝对定位的div来实现它，为你想要测量的字体赋予它样式属性，并测量div本身。

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

自动Textarea光标移动

3 个答案: