极客观点
项目管理
HarmonyOS
在制作富文本编辑器的时候 我是使用一个设置了contenteditable的div作为输入框 在工具栏里有个让用户设置加粗与否的按钮 如果这个按钮的类型是div的话 那么只要我鼠标摁下去 作为输入框的div就会发生失焦 但是如果按钮的类型是button的话就不会失焦 请问一下这个是什么原因 怎么解决 下面是测试代码 只要将initEditor函数内的b_btn的节点类型改成div就会失败
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div></div>
</body>
</html>
<script src='jquery.js'></script>
<script>
$(document).ready(function(){
var editor = initEditor();
editor.appendTo($(document.body));
$('<div>').css({position:'absolute', left:100, top:10, width:200, height:200, border:'1px solid red'}).attr({contenteditable:true}).html('sdafasfsafd').appendTo(editor);
})
function set_style(doc, key, value){
try{
doc.execCommand(key, false, value);
}catch(e){
console.log(e);
alert(e);
}
}
function initEditor(){
var editor_main_div = $('<div>')
.css({
position : 'absolute'
, left : 0
, top : 0
});
var b_btn = $('<button>')
.css({
position : 'relative'
, cssFloat : 'left'
, width : 30
, height : 30
, backgroundColor : 'blue'
})
.text('U')
.appendTo(editor_main_div)
.click(function(){
set_style(document, 'underline', null);
})
return editor_main_div;
}
</script>
只要把包含按钮的那个节点的类型改成button就行了