首頁(yè) 猿問(wèn) 關(guān)于編輯框選中文本document...

關(guān)于編輯框選中文本document.getSelection()的疑問(wèn)

JavaScript

守候你守候我 2018-12-13 15:15:25

使用window.getSelection（）獲取頁(yè)面中被選擇的文字，但發(fā)現(xiàn)這個(gè)方法只針對(duì)div這些標(biāo)簽有效，對(duì)textarea中的內(nèi)容獲取無(wú)效，自己感覺(jué)問(wèn)題解決關(guān)鍵點(diǎn)在文本框輸入時(shí)主動(dòng)獲取焦點(diǎn)的問(wèn)題上，segmentfault的編輯框就處理了這個(gè)的，求怎么破？ doEdit:function(item){ if(document.getSelection){ let target =document.getSelection(); console.log(target) } } 現(xiàn)象看圖：

查看完整描述

1 回答

HUWWW

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊

document.querySelector('#test').onselect = function(){

let start = this.selectionStart;

let end = this.selectionEnd;

console.log(this.value.slice(start, end));

}

</script>

selection range 是基于 DOM Tree 的。Textarea 中的內(nèi)容不由 DOM Tree管理，由 textarea 自己管理，因此你用 textarea.textContent 或者 textarea.innerText 也根本拿不到內(nèi)容。 textarea 中的內(nèi)容更改，也不會(huì)引起任何 node 或者 attribute 的變化，真正變化的是 textarea 的 value，這個(gè) value 是 textarea 的 property.

注意 isCollapsed: true。這個(gè)值為 true 表示此時(shí)的 selection range 的長(zhǎng)度為0，只是標(biāo)記了一個(gè)位置，而不是一個(gè) range 。

好在 textarea 自己由一套 selection 接口。

反對(duì) 回復(fù) 2019-01-01