无法创建范围()
unable to createRange()
我正在尝试选择一个动态添加的时间戳 - 在contentEditable元素中按回车键。
$('#content').on('keypress', function(e) {
if (e.which === 13) {
console.log('enter pressed');
e.preventDefault();
var range = window.getSelection().getRangeAt(0);
var element = document.createElement('p');
element.setAttribute("id", "uniqueIdentifier");
var date = new Date().getTime();
date = date.toString();
console.log('date: ' + date);
element.textContent = date;
//element.innerHTML = '<br>';
range.insertNode(element);
var range2 = document.createRange();
console.log('$(#content).text(): ' + $('#content').text());
var startOffset = $('#content').text().indexOf(date);
console.log('startOffset: ' + startOffset);
range2.setStart(document.getElementById('uniqueIdentifier'), startOffset);
range2.setEnd(document.getElementById('uniqueIdentifier'), startOffset + date.length);
// $('#content p.new').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='content' contentEditable='true'>test</p>
我收到此错误:
Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 4.
我错过了什么?
有两种方法。传递 DOM 节点或传递节点的文本部分。如果传递 DOM 节点,则应将开始和结束偏移量指定为 0 和 1,以在 DOM 节点上创建一个范围,如下所示
range.setStart(document.getElementById('uniqueIdentifier'), 0);
range.setEnd(document.getElementById('uniqueIdentifier'), 1);
如果要提供文本节点部分,则必须提供文本节点的长度,以便在DOM节点的文本部分上创建一个范围,如下所示
var uid = document.getElementById('uniqueIdentifier');
range.setStart(uid.firstChild, 0); <-- firstChild refers to the text part of a DOM node
range.setEnd(uid.firstChild, uid.firstChild.length);
您正在混合这两种方式。你可以这样解决
$('#content').on('keypress', function(e) {
if (e.which === 13) {
e.preventDefault();
var date = new Date().getTime();
date = date.toString();
var range = window.getSelection().getRangeAt(0);
var element = $('<p></p>')
.attr('class', 'uniqueIdentifier')
.text(date);
range.insertNode(element[0]); // the date node is added to the DIV at this stage
var range2 = document.createRange();
range2.setStart(element[0], 0); // <--- Give the entire date node starting at 0
range2.setEnd(element[0], 1); // <--- Ending at 1 since there is only one node that you want a range of
var newNode = document.createElement("b"); // <--- I created a b element just so that the range is visible
range2.surroundContents(newNode);
}
});
希望这有帮助。
$('#content').on('keypress', function(e) {
if (e.which === 13) {
e.preventDefault();
var date = new Date().getTime();
date = date.toString();
var range = window.getSelection().getRangeAt(0);
var element = $('<p></p>')
.attr('class', 'uniqueIdentifier')
.text(date);
range.insertNode(element[0]);
var range2 = document.createRange();
range2.setStart(element[0], 0);
range2.setEnd(element[0], 1);
var newNode = document.createElement("b");
newNode.style.color = getRandomColor(); // <-- Just so that range is visible
range2.surroundContents(newNode);
}
});
/* Courtesy: http://stackoverflow.com/a/1484514 */
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='content' contentEditable='true'>test</p>
相关文章:
- 从指定范围创建字符数组
- 如何创建一个方法来验证数组的范围
- 将值添加到使用_.map&_创建的变量中.范围
- 我怎样才能创建一个函数expr;t继承词法范围
- 使用javascript中的var关键字创建块范围的变量
- 使用范围作为 id 在传单中创建地图
- 我可以设置这个吗'某事'在该服务中动态创建的嵌套对象中的服务?(可能是范围问题)
- 需要创建一个函数,将我自己创建的范围对象转换为字符串
- Google Sheets-使用脚本创建范围(行)
- 如何创建带有多个标记的谷歌地图,从当前位置到10公里的矩形范围
- 创建新的范围示例
- HTML5:如何创建一个“;范围输入类型“;具有动态值
- 如何在范围内创建全局函数
- 如何使用CSS3和Javascript创建双范围滑块
- Jquery范围滑块如何创建自己的序列
- 在多个节点上创建范围
- 创建可在任何地方使用的 JS 函数?范围和功能“未定义”的问题
- 创建高图表点击功能时丢失了 Angularjs 范围
- 创建使用用户输入的数字范围生成的随机数.(JavaScript)
- JavaScript 全局不保留范围?创建自动完成 Web 服务 JSON 对象