HTML input - Replace selected value by typing-CodePudding

I have the below input that the user can first click to enable (button1), type the desired new value, and finally save it (button2).

<input  onkeypress="return contoso.isNumberKey(this, event,3);"
data-default_value="10,00" value="10,00" disabled="">

The issue: after the field is enabled, the user has first to erase the input content with delete or backspace at keyboard (including when the content is already selected) and then start typing the new value at the blank input field. So, the user can't simply use the mouse to select and just type the new value. This behaviour also occurs at other sections of the software when the input is text.

The idea is to improve the user experience by making it possible to just type the desired new value after button1 pressed, replacing existing and displayed content. The existing text/value should still be displayed, but already selected and ready to be replaced if the user types, or the user may want to deselect and make same minor adjust at the existing text/value.

We've tried onclick="this.select();" when button1 pressed, but still we couldn't type the new value without delete or backspace first.

Can anyone help on how to achieve this?

The HTML is generated and managed with JS. The input is whitin a table-responsive. Our system is designed to work on Chrome.

CodePudding user response：

You were on the right way to use the select() method, but you first need to focus() the input:

usrinput.focus();
usrinput.select();

Working example: (for input type text)

const usrinput = document.querySelector('input');
document.querySelector('#button1').addEventListener('click', function() {
  usrinput.disabled = false;
  usrinput.focus();
  usrinput.select();
});

<button id="button1">enable</button>
<input type="text" value="10,00" disabled>

<button id="button2">Save</button>

Working example: (for input type number)

const usrinput = document.querySelector('input');
document.querySelector('#button1').addEventListener('click', function() {
  usrinput.disabled = false;
  usrinput.focus();
  usrinput.select();
});

<button id="button1">enable</button>
<input type="number" value="10" disabled>

<button id="button2">Save</button>