javascript - 如何将插入符号放置在其中没有文本的 span 元素中?
问题描述
在这篇SO 帖子之后,我可以将插入符号放在一个span
元素中,该元素位于div contenteditable="true"
.
我可以span
通过它来定位我想要的任何一个id
,同时还可以决定插入符号应该放在哪个字符之后。
但是我怎样才能把插入符号放在一个没有文本的范围内呢?
只需按原样使用该函数,就会出现以下错误:TypeError: Range.setStart: Argument 1 is not an object.
此外,由于某种原因,当span
有内容时,它在 Firefox 中运行良好。但不是在 Chrome 中,插入符号位于span
. 有什么办法也可以解决这个问题?
如果它使事情变得更容易,我对 jQuery 持开放态度。
这是我的代码:
function setCaret(x, y) {
var element = document.getElementById(x);
var range = document.createRange();
var node;
node = document.getElementById(y);
range.setStart(node.childNodes[0], 0);
var sel = window.getSelection();
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
element.focus();
}
body {
font-family: sans-serif;
}
input {
margin-bottom: 5px;
padding: 3px;
}
input:last-of-type {
margin-top: 30px;
}
div {
width: 300px;
padding: 5px;
border: solid 1px #000;
}
span {
font-weight: bold;
}
<input type="button" value="place caret" onclick="setCaret('editableDiv1', 'span1');">
<div id="editableDiv1" contenteditable="true" spellcheck="false">This one <span id="span1">is</span> working.</div>
<input type="button" value="place caret" onclick="setCaret('editableDiv2', 'span2');">
<div id="editableDiv2" contenteditable="true" spellcheck="false">This one <span id="span2"></span> is not.</div>
解决方案
您可以考虑使用零宽度空间的一个很好的技巧(查看下面的代码)和 CSS 属性white-space: pre
,该属性允许空间在聚焦时“可见”。
function makeTextNode() {
return document.createTextNode('') // <-- there a zero-width space between quotes
}
function placeCaretInSpan() {
const range = document.createRange()
const editable = document.getElementById("editable")
const span = editable.querySelector("span")
if (span.childNodes.length === 0) {
span.appendChild(makeTextNode()) // <-- you have to have something in span in order to place caret inside
}
range.setStart(span.childNodes[0], 1) // <-- offset by 1 to be inside SPAN element and not before it
let selection = window.getSelection()
range.collapse(true)
selection.removeAllRanges()
selection.addRange(range)
editable.focus()
}
span {
font-weight: bold;
background: yellow;
}
#editable:focus {
white-space: pre;
}
<div contenteditable="true" id="editable">This should be <span></span> editable.</div>
<button onclick="placeCaretInSpan()">place caret</button>
推荐阅读
- hazelcast - 如何删除/删除 Hazelcast 计划任务?
- ruby-on-rails - Rails表单提交后如何在参数中附加数组?
- amazon-web-services - 是否可以在单个请求中将多个文件上传到 Amazon S3?
- python - Python:在给定值的数组中查找某个元素
- laravel - 如何在刀片中使用存储库模式
- ios - 未定义符号:Swift.String.unicodeScalars.getter:XCode 13 中的 Swift.String.UnicodeScalarView
- python - 如何从一组预定义的键、组合键中模拟随机键输入?tkinter GUI /窗口不工作
- html - CSS如何在响应模式下最小化屏幕时添加空间?
- excel - 自动刷新
- flutter - 为什么每次我退出并重新登录时我的bottomAppBar都会消失