Html: Proposal: autoselect attribute for editable elements

[jfbrennan]

Proposal for the addition of an autoselect boolean attribute which can be applied to editable elements, e.g. input (with some exclusions like radio/checkbox), textarea, anything with contenteditable. Similar to autofocus, this attribute would offer HTML authors a standard solution for adding auto-selecting behavior. Behaviors include:

• auto-selecting the value of the editable element on focus
• deselecting on blur
• publishing corresponding events (perhaps selectionchange, which is experimental)
• when the input has no value behaviors are not applied

Many web sites implement this behavior. The common use case is when the user is likely to want to _replace_ the whole value rather than edit it (search fields or your browser's address bar, are two common examples). Fields whose value is very likely to be _copied_ by the user is another applicable use case.

In fact, the HTML spec mentions such auto-select behavior as something browser vendors may choose to implement as part of focus:

For example, some platforms select the contents of a text field when that field is focused.
https://dev.w3.org/html5/spec-preview/editing.html#focusing-steps

So a standard, declarative solution would undoubtedly receive wide adoption and appreciation from the developer community and browser vendors have shown support for similar attributes. Usage would look like this:

<input type="text" autoselect>

That would replace the need for solutions like:

<input type="text" class="autoselect">

$('.autoselect')
    .on('focus', function(){ 
        if (this.value) this.select(); 
    })
    .on('blur', function(){ 
        var tagName = this.nodeName.toLowerCase();
        if (tagName == 'textarea' || (tagName == 'input' && this.type == 'text') ) {
            this.selectionStart = this.selectionEnd;
        }
    });

Will move forward with formal proposal and details if interest is shown.

[annevk]

Since you're new (as far as I could tell), you might want to read https://whatwg.org/faq#adding-new-features and https://whatwg.org/working-mode to get more familiar with the process. (To be clear, not meant as a slight against your proposal, which seems very reasonable to me.)

[jfbrennan]

I read that, step 3 is why I opened this issue. What’s wrong/missing?

[annevk]

Nothing, just customary to introduce people to those URLs. 😊

[laukstein]

I once implemented advanced feature like this with JavaScript,
and I want to mention, that autoselect would need make sure doesn't conflict when user tries to select part of the text (user clicks the text in field and, while holding keydown, drags-moves (mousemove) the cursor - expected partly selected text, till position of keyup. Need to be sure it accepts also touch events.

[jfbrennan]

Use case:
We have a form that includes a selecting a file and then pre-populating another input with the name of the selected file. Users can still edit this field (and most likely will), so I call select() to make it easier for the user to type a new name.

It would be really nice to put autoselect on this input and get the same behavior (a similar convenience as autofocus vs. calling focus() after page load).