当我在 div 上使用浏览器 contenteditable=true 以让用户更新其中的文本时,我遇到了这个问题(使用 Chrome):
当使用删除退格键删除换行符(跳回一行)时,浏览器会在该文本周围插入一个带有内联样式集的标签。
这真的很令人沮丧,因为它不仅这样做,它还为该跨度标签添加了一个内联样式,例如,如果我的字体颜色当前是黑色,它会向该跨度标签添加一个 style="color:black"。
结果是我不能再用我的工具栏编辑该文本的颜色,因为它已被内联样式硬设置为 span 标签。如果我用删除键备份一行,字体大小也会发生同样的事情。
这里的任何人都可以教我关于 contenteditable 的一两件事,或者建议一种删除跨度的方法:s,如果不可能阻止这种浏览器行为..
** 要重现此问题 ** - 在浏览器中创建一个 div,在其上设置内联样式,例如 font-size:36px - 使用可在浏览器中编辑的内容编辑 div 的文本,使用手动换行符编写几行。- 现在将光标放在一段文本的前面/之前,然后按退格键。现在应该在光标前面的文本周围生成一个 span 标签,并且它的样式发生了变化。
更新* * 所以我尝试了一些不同的解决方案,但效果有限。首先我尝试删除所有标签,但随后我也丢失了所有换行符(也许更好的正则表达式可以解决这个问题,我不是正则表达式写作专家)。
下面的所有函数首先在 keyup 事件中调用,然后我将它们附加到取消选择文本框。如何触发以下功能与问题无关。
//option to remove all tags
var withTags = $(textObject).html();
var withoutTags = withTags.replace(/<(?:.|\n)*?>/gm, '');
$(textObject).html(withoutTags);
我的第二次尝试更成功,通过删除文本框下方对象的样式标签(divs ans 跨越 chrome 添加的文本框内),这是我的第一个代码
//option to remove style of elements
$(textObject).children().each(function() {
$(this).removeAttr('style');
console.log('removing style from first level element: '+this);
});
然后我意识到每次我编辑一个文本框时,chrome 可能会添加一个新的嵌套级别的 div/span 标签,上面的代码不会达到,所以我这样做了:
//option to remove style of elements
$(textObject).children().each(function() {
$(this).removeAttr('style');
console.log('removing style from first level element: '+this);
//And of course it would be all too easy if chrome added only one level of elements...
$(this).children().each(function() {
$(this).removeAttr('style');
console.log('removing style from second level element: '+this);
});
});
但这还不够,因为理论上嵌套的数量可能是无限的。仍在研究更好的解决方案。任何输入表示赞赏=)