Cách nhận vị trí con trỏ văn bản sau khi sự kiện nhấn phím đã xảy ra?

Question

Tôi đang viết một công cụ đánh dấu cú pháp. Công cụ đánh dấu sẽ cập nhật đánh dấu ngay lập tức trong khi nhập văn bản và điều hướng bằng các phím mũi tên.

Sự cố tôi gặp phải là khi sự kiện 'nhấn phím' được kích hoạt, bạn vẫn nhận được vị trí cũ của con trỏ văn bản qua window.getSelection().

Ví dụ:

function handleKeyEvent(evt) { 
 
    console.log(evt.type, window.getSelection().getRangeAt(0).startOffset); 
 
} 
 

 
var div = document.querySelector("div"); 
 
div.addEventListener("keydown", handleKeyEvent); 
 
div.addEventListener("keypress", handleKeyEvent); 
 
div.addEventListener("input", handleKeyEvent); 
 
div.addEventListener("keyup", handleKeyEvent);

<div contenteditable="true">f<span class="highlight">oo</span></div>

Trong ví dụ, đặt dấu nháy trước chữ 'foo', sau đó nhấn → (phím mũi tên bên phải).

Trong giao diện điều khiển của DevTool yêu thích của bạn, bạn sẽ thấy như sau:

keydown 0 
keypress 0 
keyup 1 

Đó 0 ngoài keypress rõ ràng là vị trí dấu nháy cũ. Nếu bạn giữ phím → lâu hơn một chút, bạn sẽ nhận được một cái gì đó như thế này:

keydown 0 
keypress 0 
keydown 1 
keypress 1 
keydown 1 
keypress 1 
keydown 2 
keypress 2 
keyup 2 

vị trí dấu nháy mới như tôi sẽ nhận được nó cho 'KeyUp' hoặc 'đầu vào' Những gì tôi muốn nhận được là. Mặc dù 'keyup' được kích hoạt quá muộn (tôi muốn làm nổi bật cú pháp trong khi phím được nhấn xuống) và 'input' chỉ được kích hoạt khi có một số đầu vào (nhưng → không tạo ra bất kỳ đầu vào nào).

Có sự kiện nào được kích hoạt sau khi vị trí dấu mũ đã thay đổi và không chỉ trên đầu vào? Hay tôi phải tính toán vị trí của con trỏ văn bản và nếu vậy, làm thế nào? (Tôi giả định này có thể nhận được khá phức tạp khi văn bản kết thúc tốt đẹp và bạn nhấn ↓ (phím mũi tên xuống).)

Answer 1

Bạn có thể sử dụng setTimeout để xử lý keydown sự kiện không đồng bộ:

function handleKeyEvent(evt) { 
 
    setTimeout(function() { 
 
     console.log(evt.type, window.getSelection().getRangeAt(0).startOffset); 
 
    }, 0); 
 
} 
 

 
var div = document.querySelector("div"); 
 
div.addEventListener("keydown", handleKeyEvent);

<div contenteditable="true">This is some text</div>

Phương thức đó giải quyết vấn đề xử lý khóa. Trong ví dụ của bạn, bạn cũng có một yếu tố span bên trong div, mà làm thay đổi giá trị vị trí được trả về bởi

window.getSelection().getRangeAt(0).startOffset 

Answer 2

Dưới đây là một giải pháp điều chỉnh vị trí bằng cách sử dụng sự kiện 'KeyDown':

function handleKeyEvent(evt) { 
 
    var caretPos = window.getSelection().getRangeAt(0).startOffset; 
 

 
    if (evt.type === "keydown") { 
 
    switch(evt.key) { 
 
     case "ArrowRight": 
 
     if (caretPos < evt.target.innerText.length - 1) { 
 
      caretPos++; 
 
     } 
 
     break; 
 

 
     case "ArrowLeft": 
 
     if (caretPos > 0) { 
 
      caretPos--; 
 
     } 
 
     break; 
 

 
     case "ArrowUp": 
 
     case "Home": 
 
     caretPos = 0; 
 
     break; 
 

 
     case "ArrowDown": 
 
     case "End": 
 
     caretPos = evt.target.innerText.length; 
 
     break; 
 

 
     default: 
 
     return; 
 
    } 
 
    } 
 
    console.log(caretPos); 
 
} 
 

 
var div = document.querySelector("div"); 
 
div.addEventListener("keydown", handleKeyEvent); 
 
div.addEventListener("input", handleKeyEvent);

<div contenteditable="true">f<span class="highlight">oo</span></div>

Thật không may giải pháp này là có một số sai sót:

• Khi bên trong một phần tử con như số <span> trong ví dụ, nó không cung cấp chính xác startOffset cũng không chính xác startContainer.
• Nó không thể xử lý nhiều dòng.
• Nó không xử lý tất cả các tùy chọn điều hướng. Ví dụ. nhảy từ khôn ngoan qua Ctrl + →/← không được nhận dạng.

Và có thể có nhiều vấn đề khác mà tôi không nghĩ tới. Trong khi nó sẽ có thể xử lý tất cả những vấn đề đó, nó làm cho việc thực hiện rất phức tạp. Vì vậy, giải pháp đơn giản setTimeout(..., 0) được cung cấp bởi ConnorsFan chắc chắn là thích hợp hơn cho đến khi có event for caret position changes.