Tôi đang chèn phần tử vào div có thể chỉnh sửa nội dung nhưng trình duyệt đặt vị trí của con trỏ trước phần tử được chèn. Có thể đặt con trỏ ngay sau phần tử được chèn để người dùng tiếp tục nhập mà không phải điều chỉnh lại vị trí con trỏ không?Đặt vị trí dấu mũ ngay sau phần tử được chèn vào một div nội dung có thể chỉnh sửa
Trả lời
Chức năng sau sẽ thực hiện. Đối tượng Phạm vi DOM cấp 2 giúp việc này dễ dàng trong hầu hết các trình duyệt. Trong IE, bạn cần phải chèn một phần tử đánh dấu sau khi nút bạn đang chèn, di chuyển vùng chọn vào nó và sau đó loại bỏ nó.
Sống dụ: http://jsfiddle.net/timdown/4N4ZD/
Code:
function insertNodeAtCaret(node) {
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
range.collapse(false);
range.insertNode(node);
range = range.cloneRange();
range.selectNodeContents(node);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var html = (node.nodeType == 1) ? node.outerHTML : node.data;
var id = "marker_" + ("" + Math.random()).slice(2);
html += '<span id="' + id + '"></span>';
var textRange = document.selection.createRange();
textRange.collapse(false);
textRange.pasteHTML(html);
var markerSpan = document.getElementById(id);
textRange.moveToElementText(markerSpan);
textRange.select();
markerSpan.parentNode.removeChild(markerSpan);
}
}
Ngoài ra, bạn có thể sử dụng Rangy library tôi. Mã tương đương sẽ có
function insertNodeAtCaret(node) {
var sel = rangy.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
range.collapse(false);
range.insertNode(node);
range.collapseAfter(node);
sel.setSingleRange(range);
}
}
Heh. Điều này thật thú vị: "Các đối tượng vùng DOM Cấp 2 làm cho việc này trở nên dễ dàng trong hầu hết các trình duyệt." Đã thử nhiều hoán vị khác nhau trong ba ngày với rất ít thành công. (Tôi biết, không phải là một bình luận hữu ích, nhưng chỉ cần phải nói nó) – eon
@eon: :) Có lẽ tôi nên có đủ điều kiện rằng: "So với các khó chịu hack cần thiết trong IE <9, DOM Level 2 Range đối tượng làm cho điều này dễ dàng hầu hết các trình duyệt. " –
Chỉ có vẻ như hoạt động đối với nút văn bản. Đã cố gắng cho nó một yếu tố span và con trỏ kết thúc lên trước khi span ?? – user984003
Nếu bạn chèn một div, p hoặc span rỗng, tôi tin rằng cần phải có "thứ gì đó" bên trong phần tử mới được tạo cho phạm vi lấy vào - và trong để đặt dấu mũ bên trong.
Đây là lỗi của tôi có vẻ như hoạt động tốt trong Chrome. Ý tưởng chỉ đơn giản là đặt một chuỗi tạm thời bên trong phần tử, sau đó loại bỏ nó khi dấu mũ ở đó.
// Get the selection and range
var idoc = document; // (In my case it's an iframe document)
var sel = idoc.getSelection();
var range = sel.getRangeAt(0);
// Create a node to insert
var p = idoc.createElement("p"); // Could be a div, span or whatever
// Add "something" to the node.
var temp = idoc.createTextNode("anything");
p.appendChild(temp);
// -- or --
//p.innerHTML = "anything";
// Do the magic (what rangy showed above)
range.collapse(false);
range.insertNode(p);
range = range.cloneRange();
range.selectNodeContents(p);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
// Clear the non
p.removeChild(p.firstChild);
// -- or --
//p.innerHTML = "";
- 1. Đặt vị trí dấu mũ vào một nút trống bên trong phần tử contentEditable
- 2. Chèn văn bản vào nội dung Javascript có thể chỉnh sửa div
- 3. Vị trí con trỏ chuột CKEditor sau khi chèn phần tử không thể chỉnh sửa
- 4. Lưu và khôi phục vị trí dấu mũ cho nội dungChỉnh sửa div
- 5. Lưu các thay đổi trong nội dung có thể chỉnh sửa được bằng dấu thời gian
- 6. Cách tìm vị trí con trỏ trong DIV có thể chỉnh sửa được?
- 7. Chèn dấu mũ sau một nút được chèn
- 8. Nội dung loại bỏ nội dung có thể chỉnh sửa có thể chỉnh sửa
- 9. Làm thế nào tôi có thể nhận được từ mà dấu mũ nằm trong một div có thể chỉnh sửa được?
- 10. Thay đổi vị trí con trỏ trong div có thể chỉnh sửa được sau khi thay đổi innerHTML
- 11. tinymce mất vị trí dấu mũ
- 12. Đặt tiêu điểm vào phần tử có thể chỉnh sửa div
- 13. JavaScript 'có thể chỉnh sửa' - Nhận/Thiết lập Vị trí của Người Chăm sóc
- 14. Cách chèn phần tử sau vị trí vòng lặp
- 15. Buộc nội dung có thể chỉnh sửa được bên trong div hoặc p
- 16. div có thể chỉnh sửa được: IE8 không hài lòng với việc xóa bỏ phần tử HTML
- 17. Nhận văn bản được chọn trong DIV có thể chỉnh sửa nội dung?
- 18. X - có thể chỉnh sửa đầu vào có thể chỉnh sửa khi nhấp vào phần tử khác
- 19. Cần đặt vị trí con trỏ đến cuối div nội dung có thể chỉnh sửa, vấn đề với các đối tượng được chọn và phạm vi
- 20. lấy hàng và cột con trỏ trong div có thể chỉnh sửa nội dung
- 21. chèn một phần tử vào một vị trí cụ thể của một vector
- 22. Kéo và thả vào nội dung DIV có thể chỉnh sửa trong Firefox
- 23. HTML - Chữ cái mới trong nội dung DIV có thể chỉnh sửa được?
- 24. Nội dung FirefoxCác vấn đề tập trung div có thể chỉnh sửa
- 25. Đặt vị trí dấu mũ trong javafx.scene.control.TextArea và javafx.scene.control.TextField
- 26. Chèn văn bản vào hộp văn bản WPF ở vị trí dấu mũ
- 27. nội dung đã chọn có thể chỉnh sửa có thể chỉnh sửa và khôi phục
- 28. Nhận vị trí dấu mũ trong đầu vào HTML?
- 29. Chèn tiện ích GWT vào phần tử div
- 30. lấy nội dung văn bản từ một div có thể chỉnh sửa thông qua javascript
Related: http://stackoverflow.com/questions/2920150/insert-text-at-cursor-in-a-content-editable-div – payne
Điều đó không trả lời được câu hỏi của tôi. Tôi có thể chèn phần tử ở vị trí dấu mũ, nhưng tôi cần đặt dấu mũ ngay sau phần tử được chèn. – Elie
Bạn đã thử mô phỏng sự kiện bàn phím sau khi chèn chuỗi, chẳng hạn như phím "kết thúc" (phím mã số 35) trên bàn phím. – jnkrois