javascript - 无法创建范围()

Question

我正在尝试选择一个动态添加的时间戳 - 在 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.

我错过了什么？

Answer 1

有两种方法。传递 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>