我正在尝试制作具有最少功能的自定义文本编辑器，例如粗体、斜体、下划线和段落样式。
这是为了学习目的。 主要目标是避免通过 JavaScript 进行基于颜色的交互。我只想使用CSS的颜色交互。所以，我想用纯JS和CSS来完成它，而不使用任何库。
对于本例，我使用了 checkbox 在 contenteditable div 中制作粗体字体。因此，如果我选择仅粗体文本，那么我可以通过 JavaScript 设置 checkbox.checked = true。
但是，在从 div.innerHTML 获取所选文本的范围之前，该复选框会清除 html 中的选择。我该如何解决这个问题？
function actionBold122(e){
let editor = document.getElementById('editor')
let input = e.getElementsByTagName('input')[0]
if(input != null){
input.checked = !input.checked
}
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var arr = []
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
arr.push(sel.getRangeAt(i).cloneContents().textContent);
}
html = arr.join();
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
alert(html)
}input{
display: none;
}
input:checked+svg{
background-color: rgb(194, 10, 10);
fill: #fff;
}
label{
cursor: pointer;
}
#editor{
width: 50%;
min-height: 40px;
background-color: antiquewhite;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<label onclick="actionBold122(this); return false">
<input class="none" type="checkbox" name="0" checked>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</label>
<div id="editor" contenteditable>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim omnis ea, voluptas maxime perspiciatis praesentium magni repellendus earum suscipit sint. Veritatis fuga adipisci accusantium similique distinctio vero tenetur ipsam fugiat.</p>
</div>
<button onclick="actionBold122(this)">Get Text</button>
</body>
</html>当前代码:
我希望在复选框输入中具有与获取文本按钮相同的行为。我不知道我需要做什么。请建议我任何解决这个问题的想法。预先感谢您!
最佳答案
您的问题是，当您单击输入时，您失去了焦点，然后，文本变为未选中状态。如果将选定的文本存储在变量中怎么样？
类似这样的事情
function actionBold122(e){
let editor = document.getElementById('editor')
let input = e.getElementsByTagName('input')[0]
if(input != null){
input.checked = !input.checked
}
alert(selectedText);
}
var selectedText = '';
function onMouseUp() {
const sel = window.getSelection();
var arr = []
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
arr.push(sel.getRangeAt(i).cloneContents().textContent);
}
selectedText = arr.join();
}input{
display: none;
}
input:checked+svg{
background-color: rgb(194, 10, 10);
fill: #fff;
}
label{
cursor: pointer;
}
#editor{
width: 50%;
min-height: 40px;
background-color: antiquewhite;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<label onclick="actionBold122(this); return false">
<input class="none" type="checkbox" name="0" checked>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</label>
<div onmouseup="onMouseUp()" id="editor" contenteditable>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim omnis ea, voluptas maxime perspiciatis praesentium magni repellendus earum suscipit sint. Veritatis fuga adipisci accusantium similique distinctio vero tenetur ipsam fugiat.</p>
</div>
<button onclick="actionBold122(this)">Get Text</button>
</body>
</html>关于javascript - 单击复选框清除 contenteditable div 选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60615528/