無法創建范圍（）

Question

我正在嘗試選擇一個動態添加的時間戳 - 在 contentEditable 元素中點擊 Enter。

 $('#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>