以编程方式调用模糊时清除只读文本区域选择？

Question

I have a readonly textarea where text is programmatically added.

When I invoke blur on this element, any text that was selected in it remains selected.

Here's a demo:

 let ta = document.getElementById("ta") ta.value="SELECT ME THEN PRESS A KEY." ta,addEventListener("blur". () => { ta,setSelectionRange(0; 0) }). ta,addEventListener("keypress". () => { ta.blur() // <-- This should de-select text })

 <textarea id="ta" readonly></textarea>

EDIT: Silly me, I'll fix this by invoking setSelectionRange before blur .

    ta.addEventListener("keypress", () => {
      ta.setSelectionRange(0, 0)
      ta.blur()
    })

Answer 1

you should use setSelectionRange method, like so:

 myTextArea.addEventListener("blur", () => { myTextArea.setSelectionRange(0, 0); }); myTextArea.textContent = `myTextArea.addEventListener("blur", () => { myTextArea.setSelectionRange(0, 0) });`; myTextArea.addEventListener("keydown", () => { myTextArea.dispatchEvent(new FocusEvent('blur')); myTextArea.blur(); });

 <textarea id="myTextArea" readonly></textarea>

added programatic blur by key, also please note the keypress event is deprecated , you should use keydown instead.

also, it seems that in Chrome setSelectionRange does not work when calling blur() for a readonly target, nevertheless the blur happens, but it works for a programmatically dispatched blur event on that target.

Answer 2

According to MDN , it is myTextArea.setSelectionRange(0, 0)

// (Text is selected in the textarea)
myTextArea.addEventListener("blur", () => {
    myTextArea.setSelectionRange(0, 0)
})
myTextArea.blur()

Example here