Firefox中奇怪的textarea行为:添加空格后文本中断

Posted

技术标签:

【中文标题】Firefox中奇怪的textarea行为:添加空格后文本中断【英文标题】:strange textarea behavior in firefox: text breaks off after adding a white space 【发布时间】:2013-05-19 23:30:32 【问题描述】:

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

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

我认为您应该能够在第一行看到整个文本,但是当您在第一行的末尾添加一个空格时,最后一个单词“er”突然移动到下一行。似乎FF在测量其宽度时将空格视为单词的一部分。 Chrome 只是在添加空格时将“er”一词保留在同一行。 (顺便说一句,您可能看到的红色文字是画布上的文字)

我试过'word-break: break-all;'但随后空白被填充到下一行的开头。非常欢迎提出解决此问题的建议。谢谢!

【问题讨论】:

使用画布有什么意义吗? 是的,我正在制作一个画布绘图工具:) 【参考方案1】:

我找到了一个解决我的问题的 hack 解决方案,它基于通过将一行文本克隆到“内联块”跨度并测量该文本宽度来测量一行文本的宽度。结果如下:

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行为:添加空格后文本中断的主要内容,如果未能解决你的问题,请参考以下文章

Firefox 中奇怪的表格渲染

CodeIgniter 2.0.3 中 Active Record 中奇怪的反引号行为

Eclipse 中奇怪的后退按钮(Alt-Left)行为

类中奇怪的异步/等待行为

zsh 中奇怪的“工作”行为

UIImageView 中奇怪的对齐行为