Aqui está um exemplo no React, mas ele pode ser traduzido para jQuery no vanilla JS, se você preferir:
class Num extends React.Component {
click = ev => {
const el = ev.currentTarget;
if(document.activeElement !== el) {
setTimeout(() => {
el.select();
}, 0);
}
}
render() {
return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
}
}
O truque aqui é usar onMouseDown
porque o elemento já recebeu o foco no momento em que o evento "click" é acionado (e, portanto, oactiveElement
verificação falhará).
o activeElement
verificação é necessária para que o usuário possa posicionar o cursor onde desejar, sem selecionar novamente constantemente toda a entrada.
O tempo limite é necessário porque, caso contrário, o texto será selecionado e, em seguida, instantaneamente desmarcado, como eu acho que o navegador faz o controle do posicionamento do cursor após as palavras-chave.
E, por último, el = ev.currentTarget
é necessário no React porque o React reutiliza objetos de evento e você perde o evento sintético no momento em que o setTimeout for acionado.
<label>
para o rótulo e não ovalue
. Você pode usar JS e CSS para fazer com que pareça o mesmo, embora não seja tão anti-semântico. dorward.me.uk/tmp/label-work/example.html tem um exemplo usando jQuery.