Cách lấy điểm ảnh bù từ vị trí dấu nháy hiện tại trong iframe có contentEditable

Question

Tôi muốn định vị phần tử div nổi trong iframe với contentEditable, trong trường hợp người dùng nhập một tổ hợp phím nào đó (cho mục đích tự động hoàn thành) .

Tôi biết làm thế nào để có được vị trí dấu nháy: document.getElementById('elm1_ifr').contentWindow.getSelection().anchorOffset

Tôi có thể sử dụng để tính toán left tài sản của div, nhưng tôi dường như không thể tìm ra cách để có được những top.

Một khả năng tôi nghĩ về đã sử dụng: document.getElementById('elm1_ifr').contentWindow.getSelection().anchorNode.parentNode

Và sử dụng jQuery để có được bù đắp, nhưng nếu cha mẹ có một dòng văn bản dài, tôi sẽ chỉ có thể trích xuất các vị trí hàng đầu của dòng đầu tiên .

Có ai có thể giúp tôi với điều này không?

Answer 1

Cách đáng tin cậy duy nhất để thực hiện việc này là chèn phần tử tạm thời vào dấu mũ (đảm bảo rằng nó có chiều rộng bằng 0), lấy vị trí của nó và loại bỏ nó một lần nữa. Bạn cũng nên dán hai đầu của nút văn bản (nếu đó là một nút văn bản chứa dấu mũ) lại với nhau để đảm bảo DOM giống như trước khi chèn nút. Tuy nhiên, lưu ý rằng việc thực hiện điều này (hoặc bất kỳ thao tác DOM thủ công nào khác trên nội dung có thể chỉnh sửa) sẽ phá vỡ ngăn xếp hoàn tác nội bộ của trình duyệt.

Lý do cho điều này là việc đọc cẩn thận the spec for the getBoundingClientRect() method of Range cho thấy rằng getBoundingClientRect() không có nghĩa vụ trả lại Rect cho một phạm vi thu gọn. Về mặt khái niệm, không phải mọi vị trí trong tài liệu đều có hình chữ nhật giới hạn được xác định rõ ràng. Tuy nhiên, dấu nháy có vị trí vật lý trên màn hình mà theo ý kiến ​​của tôi nên được API lựa chọn cung cấp, nhưng hiện tại không có gì trong trình duyệt để cung cấp điều này.

Answer 2

Tôi đã gặp phải vấn đề này ngay hôm nay. Sau khi thử nghiệm một số, tôi đã làm việc này, mà không sử dụng yếu tố temorary.

Trong IE, thật dễ dàng để làm việc với tài sản offsetLeft và offsetTop của đối tượng TextRange. Một số nỗ lực là cần thiết cho webkit mặc dù.

Đây là một thử nghiệm, bạn có thể xem kết quả. http://jsfiddle.net/gliheng/vbucs/12/

var getCaretPixelPos = function ($node, offsetx, offsety){ 
    offsetx = offsetx || 0; 
    offsety = offsety || 0; 

    var nodeLeft = 0, 
     nodeTop = 0; 
    if ($node){ 
     nodeLeft = $node.offsetLeft; 
     nodeTop = $node.offsetTop; 
    } 

    var pos = {left: 0, top: 0}; 

    if (document.selection){ 
     var range = document.selection.createRange(); 
     pos.left = range.offsetLeft + offsetx - nodeLeft + 'px'; 
     pos.top = range.offsetTop + offsety - nodeTop + 'px'; 
    }else if (window.getSelection){ 
     var sel = window.getSelection(); 
     var range = sel.getRangeAt(0).cloneRange(); 
     try{ 
      range.setStart(range.startContainer, range.startOffset-1); 
     }catch(e){} 
     var rect = range.getBoundingClientRect(); 
     if (range.endOffset == 0 || range.toString() === ''){ 
      // first char of line 
      if (range.startContainer == $node){ 
       // empty div 
       if (range.endOffset == 0){ 
        pos.top = '0px'; 
        pos.left = '0px'; 
       }else{ 
        // firefox need this 
        var range2 = range.cloneRange(); 
        range2.setStart(range2.startContainer, 0); 
        var rect2 = range2.getBoundingClientRect(); 
        pos.left = rect2.left + offsetx - nodeLeft + 'px'; 
        pos.top = rect2.top + rect2.height + offsety - nodeTop + 'px'; 
       } 
      }else{ 
       pos.top = range.startContainer.offsetTop+'px'; 
       pos.left = range.startContainer.offsetLeft+'px'; 
      } 
     }else{ 
      pos.left = rect.left + rect.width + offsetx - nodeLeft + 'px'; 
      pos.top = rect.top + offsety - nodeTop + 'px'; 
     } 
    } 
    return pos; 
};