Question

Firefox（v21）在textarea中渲染文本时似乎非常不稳定。我希望能够通过使用textarea在画布上书写。它是画布顶部的一个层，后者“监听”textarea中的键命令，以呈现相同的文本。 Chrome在这方面表现相当不错，但在Firefox中我必须补偿在写入画布时添加额外的像素高度和宽度，具体取决于字体大小和类型。这是我可以解决的问题，但如果有人知道这是一个错误还是可以整齐地修复，欢迎提出建议。

然而！ :)我无法解决textarea的其他一些（IMO）奇怪行为：有时当文本到达行尾时，它会在添加白色香料时中断最后一个单词。为了证明这一点，你可以看看： http://generation-v.nl/test.html

我认为您应该能够在第一行看到整个文本，但是当您在第一行的末尾添加一个空格时，最后一个单词“er”突然移动到下一行。似乎FF在测量宽度时将白色空间计为单词的一部分。添加空白区域时，Chrome只会将“呃”字样保持在同一行。（顺便说一句，你可能看到的红色文字是画布上的文字）

我试过'断言：打破一切;'但随后白色空间被填充到下一行的开头。解决这个问题的建议非常受欢迎。谢谢！

Answer 1

我找到了解决我的问题的黑客解决方案，它基于通过将其克隆到“内联块”范围并测量该文本宽度来测量线上文本的宽度。结果如下：

http://jsfiddle.net/RPgrq/

var ta = document.getElementsByTagName('textarea')[0],
sp = document.getElementById('span'),
false_keys = [37,38, 39, 40] , width= 150;

ta.addEventListener('keyup', function(e) {
var text = this.value, count = text.length, n = 0, test_width, new_string = '', caret_start = this.selectionStart, caret_end = this.selectionEnd;

if(false_keys.indexOf(e.keyCode) > -1) { return; }

sp.innerHTML = '';
for(n = 0; n < count ; n++) {
    switch(text[n]) {
        case ' ' : sp.innerHTML += '&nbsp'; break;
        case '\n': sp.innerHTML = ''; break;
        default: sp.innerHTML += text[n]; break;
    }
    new_string += text[n];

    test_width = parseInt(window.getComputedStyle(sp).getPropertyValue('width').slice(0,-2), 10);
    if(test_width >= width) {
        if(new_string.slice(-1) == ' ' || new_string.slice(-1) == '\n') {
            new_string = new_string.slice(0, -1) + '\n';
        }
        else {
            new_string = new_string.replace(/\s([^\s]*)$/, '\n$1');         
        }
        sp.innerHTML = '' ; 
    }
}

this.value = new_string;
this.setSelectionRange(caret_start, caret_end);
});

（注意：在脚本框架中，您可以设置'width'变量来包装文本）

firefox中的奇怪textarea行为：文本在添加空格后中断

1 个答案: