Cách di chuyển con trỏ đến cuối thực thể có thể chỉnh sửa được

Question

Tôi cần di chuyển dấu mũ đến cuối contenteditable nút như trên tiện ích ghi chú Gmail.

Tôi đọc chủ đề trên StackOverflow, nhưng các giải pháp này dựa trên việc sử dụng các yếu tố đầu vào và chúng không hoạt động với các phần tử contenteditable.

Answer 1

Ngoài ra còn có một vấn đề khác.

Giải pháp của Nico Burns hoạt động nếu div contenteditable không chứa các phần tử đa cấp khác.

Ví dụ: nếu div chứa div khác và các div khác chứa nội dung khác bên trong, có thể xảy ra một số sự cố.

Để giải quyết chúng, tôi đã sắp xếp các giải pháp sau đây, đó là một sự cải tiến của 's Nico một:

//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/ 
(function(cursorManager) { 

    //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements 
    var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX']; 

    //From: https://stackoverflow.com/questions/237104/array-containsobj-in-javascript 
    Array.prototype.contains = function(obj) { 
     var i = this.length; 
     while (i--) { 
      if (this[i] === obj) { 
       return true; 
      } 
     } 
     return false; 
    } 

    //Basic idea from: https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text 
    function canContainText(node) { 
     if(node.nodeType == 1) { //is an element node 
      return !voidNodeTags.contains(node.nodeName); 
     } else { //is not an element node 
      return false; 
     } 
    }; 

    function getLastChildElement(el){ 
     var lc = el.lastChild; 
     while(lc && lc.nodeType != 1) { 
      if(lc.previousSibling) 
       lc = lc.previousSibling; 
      else 
       break; 
     } 
     return lc; 
    } 

    //Based on Nico Burns's answer 
    cursorManager.setEndOfContenteditable = function(contentEditableElement) 
    { 

     while(getLastChildElement(contentEditableElement) && 
       canContainText(getLastChildElement(contentEditableElement))) { 
      contentEditableElement = getLastChildElement(contentEditableElement); 
     } 

     var range,selection; 
     if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ 
     {  
      range = document.createRange();//Create a range (a range is a like the selection but invisible) 
      range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range 
      range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
      selection = window.getSelection();//get the selection object (allows you to change selection) 
      selection.removeAllRanges();//remove any selections already made 
      selection.addRange(range);//make the range you have just created the visible selection 
     } 
     else if(document.selection)//IE 8 and lower 
     { 
      range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible) 
      range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range 
      range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
      range.select();//Select the range (make it the visible selection 
     } 
    } 

}(window.cursorManager = window.cursorManager || {})); 

Cách sử dụng:

var editableDiv = document.getElementById("my_contentEditableDiv"); 
cursorManager.setEndOfContenteditable(editableDiv); 

Bằng cách này, con trỏ chắc chắn được đặt ở cuối phần tử cuối cùng, cuối cùng được lồng vào nhau.

EDIT # 1: Để trở nên chung chung hơn, câu lệnh trong khi cũng nên xem xét tất cả các thẻ khác không thể chứa văn bản. Các phần tử này được đặt tên là các phần tử void và trong this question có một số phương pháp về cách kiểm tra xem một phần tử có bị vô hiệu hay không. Vì vậy, giả định rằng tồn tại một hàm gọi là canContainText trả true nếu đối số không phải là một yếu tố vô hiệu, các dòng mã sau đây:

contentEditableElement.lastChild.tagName.toLowerCase() != 'br' 

nên được thay thế bằng:

canContainText(getLastChildElement(contentEditableElement)) 

EDIT # 2: Mã ở trên được cập nhật đầy đủ, với mọi thay đổi được mô tả và thảo luận

Answer 2

Giải pháp của Geowa4 sẽ hoạt động cho vùng văn bản chứ không phải cho phần tử có thể chỉnh sửa được.

Giải pháp này là để di chuyển dấu mũ đến cuối phần tử có thể chỉnh sửa được. Nó sẽ làm việc trong tất cả các trình duyệt hỗ trợ contenteditable.

function setEndOfContenteditable(contentEditableElement) 
{ 
    var range,selection; 
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ 
    { 
     range = document.createRange();//Create a range (a range is a like the selection but invisible) 
     range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range 
     range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
     selection = window.getSelection();//get the selection object (allows you to change selection) 
     selection.removeAllRanges();//remove any selections already made 
     selection.addRange(range);//make the range you have just created the visible selection 
    } 
    else if(document.selection)//IE 8 and lower 
    { 
     range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible) 
     range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range 
     range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
     range.select();//Select the range (make it the visible selection 
    } 
} 

Nó có thể được sử dụng bởi mã tương tự như:

elem = document.getElementById('txt1');//This is the element that you want to move the caret to the end of 
setEndOfContenteditable(elem); 

Answer 3

Có thể đặt con trỏ đến cuối qua phạm vi:

setCaretToEnd(target/*: HTMLDivElement*/) { 
    const range = document.createRange(); 
    const sel = window.getSelection(); 
    range.selectNodeContents(target); 
    range.collapse(false); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    target.focus(); 
    range.detach(); // optimization 

    // set scroll to the end if multiline 
    target.scrollTop = target.scrollHeight; 
}