HMR*_*HMR 5 html javascript html5 dom
我有一个用于用户输入的contenteditable div,当点击一个按钮时,它显示替换某些单词的选项.首先,它剥离所有html并创建可以替换单词的span元素.这些词的标记是不同的,我面临一些问题.
但它看起来有点奇怪.所以我的问题是:
是否有一种简单的方法可以将一个span元素锁定在一个contenteditable中,不涉及捕获key和preventDefault(尚未尝试过,甚至不确定它是否可行)？
当单击或直接移动光标旁边的光标并键入文本时,它将成为跨度的一部分,有没有办法让它成为跨度的一部分？填充跨度 可能有效,但当跨度是该行的第一个单词时,它看起来很奇怪.为了说明这一点,我在下面发布了一个示例html文件:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
<body>
<div contenteditable="true"></div>
<script type="text/javascript">
document.getElementsByTagName("div")[0]
.innerHTML="<span style='color:green'>hello</span>"
</script>
</body>
</html>
至于锁定 contenteditable div 中的元素；我正在使用需要锁定的跨度，并且它们不会触发 keydown 事件，因此在 div 上设置了事件并检查范围是否是锁定元素。
我正在使用谷歌闭包库，因此获取范围很简单：
goog.events.listen(document.getElementById("userInput"),//userInput= contenteditable div
[goog.events.EventType.KEYDOWN,
goog.events.EventType.PASTE],
function(e){
if(32<e.keyCode&&e.keyCode<41){//page up,down,home,end and arrow
return;
}
var el=goog.dom.Range.createFromWindow()
.getContainerElement();
if(el.className.indexOf("locked")!==-1){
e.preventDefault();
}
});
我将研究用 填充锁定的跨度。如果元素之前或之后不存在空格，并在我得到解决方案后将其发布到此处。
最终在没有检查的情况下填充了跨度，因为无论如何多余的空白稍后都会被删除。看起来有点有趣，但总比无法添加文本要好。