3

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

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

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

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

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

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

4

3 回答 3

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

于 2012-05-20T00:28:03.090 回答
0

如果您的文本区域的内容溢出，请检查每个按键，并提供此问题的答案：确定 HTML 元素的内容是否溢出

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

于 2012-05-19T23:46:27.970 回答
0

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

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

于 2012-05-19T23:49:37.653 回答