0

I want to be able to prevent a user entering characters into a textbox based on what the text of the textbox would be if the character gets entered.

The initial thought is to do something like this:

<input type="text" id="test" />

document.getElementById("test").addEventListener("keypress", (e) => {
    // Get the current text
    const currentText = e.target.value;

    // Get the new char entered by the user
    const newChar = String.fromCharCode(e.keyCode);

    // The problem is that we don't know where the cursor is, 
    // i.e. we CANNOT guarantee that the new text will be:
    const newText = `${currentText}${newChar}`;
    
    // ...because that assumes the cursor is at the end of the current text

    // I want to check that newText is valid before allowing the event to go through
    if(!someCustomCheck(newText)) {
        e.preventDefault();
    }
});

The comments explain my issue, but here's a further example: imagine we have an input that allows numbers with 2 decimal places to be added:

  • We have an empty input box
  • We type 1 into it; this is valid, so we allow it
  • We type . into it, which again is valid, then 2 and 3
  • This gives us a textbox with 1.23
  • The user then types 4:
    • The problem is that this 4 could be 1.234, which would be invalid, but it could also be 41.23 or 14.23, which is valid

I cannot see a way to get the cursor position in the event in the click event, nor can I see a property in e.target (like you can in the keyup event) that gives the final text of the input.

Is there a way to do this?

MSOACC
  • 3,074
  • 2
  • 29
  • 50
  • Why don't use event `change` instead of `keypress` ? – Simone Rossaini Apr 11 '22 at 13:31
  • Or why don't use `` so you can use step for max decimal? – Simone Rossaini Apr 11 '22 at 13:34
  • @SimoneRossaini the `change` handler only fires when focus is lost (if I'm not mistaken). I want to prevent invalid input from being entered completely. I could use `type="number"`, but that only solves the issue for this particular use case of numbers with `x` number of decimal points. – MSOACC Apr 11 '22 at 13:46
  • I seem to have only read this problem am I wrong? in case you use what you have already written in addition to the input "number" – Simone Rossaini Apr 11 '22 at 13:48

1 Answers1

1

The answer, for future readers, is to use e.target.selectionStart. That allows you to find where the user made the key press and allows you to build up what the final string would be if the input is allowed to be entered.

const newChar = String.fromCharCode(e.keyCode);
const cursorPos = e.target.selectionStart;
const inputText = e.target.value;

const proposedNewText = `${inputText.slice(0, cursorPos)}${newChar}${inputText.slice(cursorPos, inputText.length)}`;

It's worth noting that this can get more complicated if the user has selected a range of text (i.e. a textbox with 5 characters in it and the users clicks and drags to select the 2nd -> 5th character) and then types. In that case, you'll have to get both the start and end cursor position (e.target.selectionStart and e.target.selectionEnd) and .splice() the string, adding in the user's new character.

You've then got the issue that by changing the value of the input (using e.target.value = newText) that the cursor will automatically jump to the end of the text. There's a lot to consider depending on your use case.

Hopefully this helps point someone in the right direction.

MSOACC
  • 3,074
  • 2
  • 29
  • 50