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.
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