HTML input - Replace selected value by typing

Question

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 class="form-control inputUserValue" 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.

biberman · Accepted Answer · 2022-06-29 13:55:58Z

1

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>

edited Jun 29, 2022 at 13:55

answered Jun 29, 2022 at 13:25

biberman

5,7794 gold badges16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rd1218 Over a year ago

Thank you for your suggestion, but please notice that the solution should also apply for text input. So, erase the original content is not suitable. If this may seems ok with numbers, this doesn't work well with text (sometimes the users just want to edit a specific segment, not retype everything).

biberman Over a year ago

I added now two input types: text and number. If that is not what you are looking for, please be more specific...

rd1218 Over a year ago

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.

biberman Over a year ago

Ahh, now i see. I update my answer again...

Collectives™ on Stack Overflow

HTML input - Replace selected value by typing

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related