Làm cách nào để có được yếu tố mà dấu mũ ở trong Javascript, khi sử dụng contentEditable?

Hãy nói rằng tôi có một số mã HTML như thế này:Làm cách nào để có được yếu tố mà dấu mũ ở trong Javascript, khi sử dụng contentEditable?

<body contentEditable="true"> 
    <h1>Some heading text here</h1> 
    <p>Some text here</p> 
</body>

Bây giờ caret (con trỏ nhấp nháy) nhấp nháy bên trong phần tử H1, giả sử trong từ "tiêu đề". Làm thế nào tôi có thể lấy tên của phần tử mà dấu mũ có trong JavaScript? Ở đây tôi muốn nhận được "h1".

Điều này chỉ cần làm việc trong WebKit (nó được nhúng trong một ứng dụng). Nó cũng nên làm việc cho các lựa chọn.

Nguồn

2009-07-29 Lucas

Trước tiên, hãy suy nghĩ về lý do tại sao bạn đang thực hiện việc này. Nếu bạn đang cố gắng ngăn người dùng chỉnh sửa các yếu tố nhất định, chỉ cần đặt contenteditable thành false trên các yếu tố đó.

Tuy nhiên, bạn có thể thực hiện những gì bạn yêu cầu. Mã bên dưới hoạt động trong Safari 4 và sẽ trả về nút mà vùng chọn được neo vào (tức là nơi người dùng bắt đầu chọn, chọn "ngược" sẽ trả về kết thúc thay vì bắt đầu) - nếu bạn muốn loại phần tử là chuỗi, chỉ cần lấy thuộc tính nodeName của nút được trả về. Điều này cũng làm việc cho các lựa chọn độ dài bằng không (nghĩa là chỉ một vị trí dấu mũ).

function getSelectionStart() { 
    var node = document.getSelection().anchorNode; 
    return (node.nodeType == 3 ? node.parentNode : node); 
}

Nguồn

2009-07-31 11:13:35 You

Tôi không cố chặn người dùng theo bất kỳ cách nào, tôi thực sự chỉ cần tên nút để tôi có thể cập nhật một phần của giao diện người dùng. Cảm ơn bạn đã cung cấp câu trả lời, điều này rất hữu ích. – Lucas

'node.nodeType == 3' sẽ là một kiểm tra tốt hơn cho một nút văn bản. –

Sử dụng tính năng này trong HTMLEditor của JavaFX, công cụ này sẽ trả về phần tử mà con trỏ/văn bản được đặt trong phần contentEditable, cảm ơn! Là một lưu ý phụ, document.activeElement được nhận ra nhưng luôn trả về phần tử cơ thể không hữu ích lắm. –

Làm cách nào để có được yếu tố mà dấu mũ ở trong Javascript, khi sử dụng contentEditable?

Trả lời

Các vấn đề liên quan