Làm cách nào để tìm vị trí con trỏ (X/Y, không phải dòng/cột) trong văn bản HTML?

Question

Tôi muốn hiển thị danh sách thả xuống trong một số <textarea> để giúp người dùng nhập một số thứ nhất định. Bạn biết điều này từ các IDE hiện tại khi hoàn thành mã. Khi bạn bắt đầu nhập nội dung nào đó, cửa sổ bật lên sẽ xuất hiện ngay tại vị trí con trỏ/dấu mũ hiện tại và bạn có thể điều hướng nó bằng các phím mũi tên để hoàn tất nhập văn bản của mình.

Tôi biết how to get the cursor position trong chuỗi văn bản (tức là chỉ số đặc tính của vị trí con trỏ) nhưng tôi không biết làm thế nào để có được X/Y tọa độ (giống như offsetWidth và offsetHeight) của con trỏ bên trong <textarea> yếu tố để Tôi có thể định vị phần tử danh sách của mình ở đó. Điều đó có thể thực hiện được trong HTML/JavaScript không và nó hoạt động như thế nào?

Answer 1

Với một đầu vào có thể chỉnh sửa html (trong một iframe như CKeditor hoặc Rich Text Editor hoặc thậm chí tốt hơn: jsfiddle), bạn có thể chèn một phần tử khoảng trống tại vị trí dấu nháy và có được vị trí của nguyên tố đó để hiển thị danh sách thả xuống của bạn.

Nó có vẻ phức tạp nhưng tôi không thể nghĩ ra cách nào khác để làm điều này.

Nó có một số khả năng thêm khi được sử dụng cho một trình soạn thảo mã, bạn có thể mã màu văn bản và định dạng mã như jsfiddle có, và thậm chí có thể xây dựng một số loại mã tự động hoàn tất cho các từ khóa, vv