代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.edit {
width: 600px;
margin: 20px auto;
border: 1px solid #333;
padding: 20px;
height: 500px;
}
.item {
display: inline-block;
border: 1px solid #333;
padding: 5px 10px;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="edit" contenteditable="true">
<span class="item" contenteditable="false"> 文字是的</span>
</div>
</body>
</html>
<script>
</script>
运行效果
当鼠标元素前面时光标在子元素内部。子元素的contenteditable属性为false,
当鼠标元素前面时光标在子元素内部。子元素的contenteditable属性为false
这样看起总感觉有为题,想把光标从元素内移出来
自己通过猥琐方法移出了光标,还是没有达到预期效果:demo
简单的富文本拖拽编辑器 - JSRUNjsrun.net不知道大家有没有好的方法