Tôi có văn bản có chứa <p>
. Khi nhấp vào <p>
, tôi tạo <textarea>
chứa văn bản từ <p>
. Có thể tính toán trong đó trong văn bản của <p>
nhấp chuột xảy ra không và di chuyển con trỏ của <textarea>
đến cùng một điểm đó?Có thể tìm ra vị trí trong văn bản của một sự kiện nhấp chuột xảy ra không?
Trả lời
Tôi không tin như vậy, không. DOM chỉ biết phần tử chứa phần tử nhận được sự kiện nhấp chuột, nó không phân biệt giữa các phần văn bản trong phần tử chứa trừ khi chúng là các phần tử. Và tôi nghi ngờ bạn muốn bao bọc mọi ký tự trong văn bản của bạn với thẻ phần tử riêng của nó :)
Tôi đoán điều này sẽ mất một số tiền hợp lý để có quyền, và bạn sẽ không thể nó chính xác. Nhưng có thể bạn sẽ muốn sử dụng event.clientX và event.clientY.
EDIT - không biết về nội dung này khi tôi trả lời. Có vẻ khá có thể để có được nó chính xác. http://www.quirksmode.org/dom/range_intro.html
Ý tưởng thay đổi: tạo kiểu văn bản để văn bản trông giống như văn bản thuần túy và tạo kiểu lại giống như trường biểu mẫu khi được nhấp vào.
ooo, tôi thích ý tưởng thay thế đó. Tôi có thể phải tinker xung quanh với điều đó tại một số điểm trong tương lai phát triển. – David
ý tưởng hay về: tạo kiểu textarea. Đây là điều tuyệt vời nhất mà tôi từng nghĩ, nhưng tôi vẫn thấy một số nhược điểm, ví dụ: khi có nhiều hơn một đoạn được nhập vào trong một '
Hope ví dụ đơn giản này sẽ giúp:
<html>
<head/>
<body>
<script type='text/javascript'>
function getPosition()
{
var currentRange=window.getSelection().getRangeAt(0);
return currentRange.endOffset;
}
function setPosition(elemId, caretPos) {
var elem = document.getElementById(elemId);
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
function test()
{
setPosition('testId', getPosition());
}
</script>
<p onclick = 'test()'>1234567890</p>
<textarea id='testId'>123467890</textarea>
</body>
</html>
Hoặc bạn có thể sử dụng thư viện JS của bên thứ ba như jQuery - xem this example.
- 1. Chuỗi sự kiện không thể xảy ra
- 2. Tôi có thể ngăn sự kiện mờ xảy ra không?
- 3. jQuery: Chặn `nhấp chuột` khi` dblclick` sắp xảy ra?
- 4. Sự kiện xảy ra trong DataGridViewComboBoxColumn SelectedIndexChanged
- 5. iText gặp sự cố với Anchors (có thể nhấp nhưng không có gì xảy ra)
- 6. Xoay văn bản tại sự kiện nhấp chuột vào nút
- 7. Làm thế nào để xác định màn hình nào mà sự kiện chuột Swing xảy ra?
- 8. Khi sự kiện chuột và chuột phải không bằng một cú nhấp chuột
- 9. iOS không nhận dạng các sự kiện nhấp chuột
- 10. Sự kiện mờ dừng sự kiện nhấp chuột hoạt động?
- 11. Mọi sự kiện javascript xảy ra khi người dùng nhấp vào nút Dừng tải?
- 12. Google Map KML sự kiện lớp dấu vị trí nhấp chuột trở ZERO_RESULTS
- 13. Làm thế nào để tìm từ có thể xảy ra tối đa từ văn bản?
- 14. Lấy vị trí/nút bấm chuột vào sự kiện DoubleClick
- 15. tìm vị trí {x, y} của văn bản trong uilabel
- 16. Làm cách nào để kích hoạt sự kiện khi nhấp chuột xảy ra bên ngoài hộp thoại
- 17. Tại sao sự kiện DOMContentReady không xảy ra?
- 18. Có phải sự kiện Nhấp chuột câm trong Fancybox không?
- 19. Jasmine không thể kích hoạt sự kiện nhấp chuột
- 20. Làm thế nào để tìm ra nơi xảy ra lỗi trong kịch bản cài đặt Inno?
- 21. Sự kiện nhấp chuột của Google Maps Marker
- 22. UITextView (chỉnh sửa) - phát hiện sự kiện dòng tiếp theo xảy ra
- 23. android: Cách nhận vị trí văn bản từ sự kiện chạm
- 24. Văn bản vị trí trong một NSTextField
- 25. NSTableXem cách nhấp vào bất kỳ vị trí nào trong ô để chỉnh sửa văn bản?
- 26. Sự cố với hộp văn bản bên trong updatepanel - không gây ra sự kiện OnTextChanged
- 27. Di chuyển chuột đến vị trí và nhấp chuột trái
- 28. Nhấp và kéo chuột Sự kiện WPF
- 29. Sự kiện nhấp chuột điều khiển người dùng không hoạt động khi nhấp vào văn bản bên trong kiểm soát?
- 30. Nhận vị trí chuột trong div có thể cuộn
Tôi nghĩ bạn đúng ... nhưng tôi hy vọng bạn đã sai! – Armand
@ Câu trả lời của Yeti dường như mâu thuẫn với những gì bạn đang nói, David. Đó là điều tôi cũng không biết. – morgancodes
@morgancodes: Tôi chắc chắn hy vọng giải pháp của Yeti sẽ hoạt động. Tôi sẽ phải giữ nó xung quanh trong trường hợp tôi từng gặp phải điều tương tự :) – David