我以这个简单的HTML为例:
<div id="editable" contenteditable="true">
text text text<br>
text text text<br>
text text text<br>
</div>
<button id="button">focus</button>
我想要简单的事情 - 当我点击按钮时,我想将插入符号(光标)放入可编辑div中的特定位置.通过网络搜索,我将这个JS附加到按钮点击,但它不起作用(FF,Chrome):
var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);
是否可以像这样设置手动插入位置？
我的任务是将文本插入符设置为显示在contentEditablediv中的空span节点内.
以下为我在Firefox 3.6上没有任何问题:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js">
</script>
<style>
#multiple {
border: 1px solid #ccc;
width: 800px;
min-height: 20px;
padding: 5px;
outline: none;
}
</style>
<script>
$(document).ready(function(){
var contentEditable = document.getElementById('multiple');
var lastItem = contentEditable.getElementsByTagName('span').item(2);
var selectElementText = function(el, win){
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
range = doc.createRange();
range.selectNodeContents(el);
range.collapse(false);
sel = win.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
else
if (doc.body.createTextRange) …当contenteditable元素具有position: relative背景颜色时，插入符号在放置在该元素中时是不可见的。这是一个例子：
.bug {
position: relative;
background-color: lightgrey;
}<div contenteditable>
This has caret
<span class="bug">no caret here?!</span>
this has caret
</div>我的第一个想法是“这是一个浏览器错误”，但在 Chrome 和 Firefox 上这是完全相同的错误！
是什么导致插入符号消失？有解决方法吗？