我的问题与textarea中的Automatic newline in textarea几乎类似,但是我的上下文更加复杂。我有多个具有1行属性的textareas,因此给人以空中书写的感觉(这意味着网站上的空白区域没有边框,因为我在css中将textarea边界设置为>>> border:0;)。

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

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

我曾尝试过四处游荡并考虑不同的hack,但似乎只有一个解决方案...尝试将每个字符存储在数组中,并为它们提供默认值,以px表示值...例如'a'=> 0.7px ,'b'=> 0.9px或类似的东西(如果它们是某个位置的列表)(尽管在内存方面看起来会花费很多开销,因为我必须同时存储大写字母,小写字母和许多其他字符。)然后根据浏览器的宽度进行一些计算(如果它已经调整大小)或者不是完整尺寸,以确定textarea行宽度何时在浏览器宽度边缘变满。 (目前,textarea宽度为100%,没有父级,因此会填满整个浏览器宽度)。

如果有人对我可以实现复杂或简单的方法有想法,请帮助我。一个大问题是,如果调整了浏览器窗口的大小,则IE和Mozilla会引入滚动条,而滚动条是我永远都不想让用户看到的(记住打字时凭空输入的印象)。

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

最佳答案

这比看起来难。尝试检查文本区域的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/

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

07-24 09:46
查看更多