将选择器光标设置到 contenteditable div 中的新位置
Set the selector cursor to a new position in contenteditable div
我一直在制作一个文本编辑器,但我无法在 div 的新位置获取和设置 "cursor" 内容可编辑。
<form action="submitchapter.php" method="post">
<div class="input-group mb-3" style="margin-top:30px;">
<input type="text" class="form-control name" placeholder="Chapter Name" name="sname" value="No Title For The Chapter" required>
</div>
<div class="buttons shadow-sm">
<button style="padding:0; border:0px solid white; background-color:white;" type="button" id="buttonbold"><i class="fas fa-bold" id="bold"></i></button>
<input id="file-input" type="file" name="name" style="display: none;" />
</div><br>
<div class="containe shadow-sm" style="padding:20px; background-color:white;">
<div class="content" contenteditable="true" name="content" id="content" role="textbox" spellcheck="false"></div>
</div>
var content = document.getElementById("content");
var bold = document.getElementById("bold");
var content = document.getElementById("content");
$("#buttonbold").click(function(){
content.focus();
var valuelength = content.value.length - 4;
content.setSelectionRange(content.value.length,valuelength);
});
var boldactive = false;
$("#bold").click(function(){
if (boldactive == false) {
var content1 = content.innerHTML;
content.innerHTML = content1 + "<b>";
boldactive = true;
} else {
var content1 = content.innerHTML;
content.innerHTML = content1 + "</b>";
boldactive = false;
}
});
但没有任何效果。我也尝试过使用 textarea,但我觉得我做错了什么。
<div>
元素没有 value
属性
$("#buttonbold").click(function(){
content.focus();
var valuelength = content.textContent.length - 4;
content.setSelectionRange(content.textContent.length,valuelength);
});
。
<div>
元素也没有 setSelectionRange
方法,
所以这是使用 contenteditable
属性:
对元素进行这种选择的解决方案
const myDiv = document.getElementById('my-div')
, btSelectRange = document.getElementById('bt-select-range')
;
function setSelectionRangeCE(el, pos, len)
{
el.focus();
let range = document.createRange()
, sel = window.getSelection()
;
range.setStart(el.firstChild, pos)
range.setEnd(el.firstChild, pos+len)
sel.removeAllRanges()
sel.addRange(range)
}
btSelectRange.onclick=_=>
{
setSelectionRangeCE(myDiv,2,5)
}
#my-div {
margin: 1em;
padding: .7em;
width: 16em;
height: 3em;
border: 1px solid grey;
}
button {
margin: 1em;
}
<div id="my-div" contenteditable >hello world</div>
<button id="bt-select-range" > select range pos:2 len:5 </button>
我一直在制作一个文本编辑器,但我无法在 div 的新位置获取和设置 "cursor" 内容可编辑。
<form action="submitchapter.php" method="post">
<div class="input-group mb-3" style="margin-top:30px;">
<input type="text" class="form-control name" placeholder="Chapter Name" name="sname" value="No Title For The Chapter" required>
</div>
<div class="buttons shadow-sm">
<button style="padding:0; border:0px solid white; background-color:white;" type="button" id="buttonbold"><i class="fas fa-bold" id="bold"></i></button>
<input id="file-input" type="file" name="name" style="display: none;" />
</div><br>
<div class="containe shadow-sm" style="padding:20px; background-color:white;">
<div class="content" contenteditable="true" name="content" id="content" role="textbox" spellcheck="false"></div>
</div>
var content = document.getElementById("content");
var bold = document.getElementById("bold");
var content = document.getElementById("content");
$("#buttonbold").click(function(){
content.focus();
var valuelength = content.value.length - 4;
content.setSelectionRange(content.value.length,valuelength);
});
var boldactive = false;
$("#bold").click(function(){
if (boldactive == false) {
var content1 = content.innerHTML;
content.innerHTML = content1 + "<b>";
boldactive = true;
} else {
var content1 = content.innerHTML;
content.innerHTML = content1 + "</b>";
boldactive = false;
}
});
但没有任何效果。我也尝试过使用 textarea,但我觉得我做错了什么。
<div>
元素没有 value
属性
$("#buttonbold").click(function(){
content.focus();
var valuelength = content.textContent.length - 4;
content.setSelectionRange(content.textContent.length,valuelength);
});
。
<div>
元素也没有 setSelectionRange
方法,
所以这是使用 contenteditable
属性:
const myDiv = document.getElementById('my-div')
, btSelectRange = document.getElementById('bt-select-range')
;
function setSelectionRangeCE(el, pos, len)
{
el.focus();
let range = document.createRange()
, sel = window.getSelection()
;
range.setStart(el.firstChild, pos)
range.setEnd(el.firstChild, pos+len)
sel.removeAllRanges()
sel.addRange(range)
}
btSelectRange.onclick=_=>
{
setSelectionRangeCE(myDiv,2,5)
}
#my-div {
margin: 1em;
padding: .7em;
width: 16em;
height: 3em;
border: 1px solid grey;
}
button {
margin: 1em;
}
<div id="my-div" contenteditable >hello world</div>
<button id="bt-select-range" > select range pos:2 len:5 </button>