Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clarify how text selection in <input> and <textarea> work with Selection interface #83

Open
tkent-google opened this issue Mar 6, 2017 · 4 comments
Open

Clarify how text selection in <input> and <textarea> work with Selection interface #83

tkent-google opened this issue Mar 6, 2017 · 4 comments

Comments

@tkent-google
Copy link

The relationship between Selection interface and text control selections is unclear. Let's clarify, and ask for updating HTML specification if needed.
@tkent-google tkent-google mentioned this issue Mar 6, 2017
Closed
@rniwa
Copy link
Contributor

rniwa commented Mar 6, 2017

The biggest difference between WebKit/Blink and Gecko is that the former two will update the selection inside a text field based on APIs on Selection whereas Gecko doesn't.

@rniwa rniwa mentioned this issue Mar 6, 2017
Closed
@tkent-google
Copy link
Author

tkent-google commented Mar 7, 2017 •
edited
Loading 

<!DOCTYPE html>
<body><div></div><input value="initial"><div></div>
<script>
var sel = getSelection();
sel.removeAllRanges();
var i = document.querySelector('input');
i.setSelectionRange(1, 1);
alert('before focus: ' + sel.anchorNode + ' ' + sel.anchorOffset +
  ' ' + sel.focusNode + ' ' + sel.focusOffset);

i.focus();
alert('after focus: ' + sel.anchorNode + ' ' + sel.anchorOffset +
  ' ' + sel.focusNode + ' ' + sel.focusOffset);
</script>
</div>
  Firefox Chrome Safari Edge
before focus null 0 null 0 null 0 null 0 body 1 body 1 body 1 body 1
after focus body 1 body 1 body 1 body 1 body 1 body 1 body 1 body 1

It seems a difference is only how text control selection API works without focus.

@tkent-google
Copy link
Author

As for Selection.toString(), Chrome and Safari return selected string in a text control, and Edge and Firefox returns nothing.

@andreubotella
Copy link
Member

I was testing the selection range with input and textarea, and there is also a difference between Blink/WebKit and Gecko. If some text in a text field or textarea is selected, the selection range in Blink and WebKit seems to be equivalent to a caret selection immediately before the input or textarea (so range.startContainer === input.parentNode). Gecko's behavior is much stranger: it seems like if the last non-text-field selection was a range selection, it treats the new selection as empty; but if the last non-text-field selection was a caret selection, it keeps it.

Gecko's behavior is almost certainly unintentional and the result of an implementation bug, but I wonder whether Blink/WebKit's behavior is worth keeping.

@rniwa rniwa mentioned this issue Jul 13, 2022
Closed
@oliviertassinari oliviertassinari mentioned this issue Mar 27, 2023
Merged
1 task
@whsieh whsieh mentioned this issue Aug 9, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rniwa @andreubotella @tkent-google