Css firefox中奇怪的textarea行为:添加空白后文本中断
Firefox(v21)在文本区域中呈现文本似乎非常不稳定。我希望能够使用文本区域在画布上写字。它是画布顶部的一个层,后者“侦听”textarea中的关键命令,以呈现相同的文本。Chrome在这方面表现得相当不错,但在Firefox中,我必须根据字体大小和类型,在写入画布时添加额外的像素高度和宽度来进行补偿。这是我可以解决的问题,但是如果有人知道这是一个bug还是可以用一种简洁的方式修复的话,欢迎提出建议 但是!:)我一直无法解决textarea的一些其他(IMO)奇怪行为:有时,当文本到达行尾时,在添加白色香料时,它只是打断最后一个单词。要演示这一点,您可以查看以下内容: 我认为你应该能够在第一行看到全文,但是当你在第一行末尾添加一个空格时,最后一个单词“er”突然移动到下一行。似乎FF在测量单词宽度时将空格作为单词的一部分进行计算。Chrome只是在添加空白时将单词“er”保持在同一行。(顺便说一句,您可能看到的红色文本是画布上的文本)Css firefox中奇怪的textarea行为:添加空白后文本中断,css,textarea,word-wrap,Css,Textarea,Word Wrap,Firefox(v21)在文本区域中呈现文本似乎非常不稳定。我希望能够使用文本区域在画布上写字。它是画布顶部的一个层,后者“侦听”textarea中的关键命令,以呈现相同的文本。Chrome在这方面表现得相当不错,但在Firefox中,我必须根据字体大小和类型,在写入画布时添加额外的像素高度和宽度来进行补偿。这是我可以解决的问题,但是如果有人知道这是一个bug还是可以用一种简洁的方式修复的话,欢迎提出建议 但是!:)我一直无法解决textarea的一些其他(IMO)奇怪行为:有时,当文本到达行尾
我试过“断字:全部断字;”但随后,空白填充到下一行的开头。解决这一问题的建议非常受欢迎。谢谢 我找到了一个解决问题的方法,它是通过将一行文本克隆成一个“内联块”跨度并测量该文本宽度来测量该行文本的宽度。结果如下:
var ta=document.getElementsByTagName('textarea')[0],
sp=document.getElementById('span'),
假_键=[37,38,39,40],宽度=150;
ta.addEventListener('keyup',函数(e){
var text=this.value,count=text.length,n=0,test\u width,new\u string='',caret\u start=this.selectionStart,caret\u end=this.selectionEnd;
if(false_keys.indexOf(e.keyCode)>-1{return;}
sp.innerHTML='';
对于(n=0;n=宽度){
如果(新字符串.slice(-1)=''新字符串.slice(-1)='\n'){
new_string=new_string.slice(0,-1)+'\n';
}
否则{
新建字符串=新建字符串。替换(/\s([^\s]*)$/,“\n$1”);
}
sp.innerHTML='';
}
}
this.value=新字符串;
此.setSelectionRange(插入符号开始、插入符号结束);
});
(注意:在脚本框架中,您可以设置'width'变量来包装文本)使用画布的任何原因?是的,我正在制作画布绘制工具:)
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 += ' '; 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);
});