0

What I want is NOT to emulate a key press event in javascript, but get the value of a string after a key press.

To clarify; given a text input, I want to see what the value of my text input would be if the user pressed a certain key.

i.e, I want the following function.

function getStringValueAfterKeyPress(string, cursorPosition, keyCode) {
    // returns string value after key press with provided code on provided cursor position
}

getStringValueAfterKeyPress('test', 4, 8) // returns 'tes' (8 is keycode of backspace)
getStringValueAfterKeyPress('test', 4, 37) // returns 'test' (37 is keycode of left arrow, hence string value has not changed)
getStringValueAfterKeyPress('test', 4, 49) // returns 'test1' (49 is keycode of '1')

And so on. Is there a simple way of doing this?

P.S my use case will be to use this method on an afterKeyDown event, get the value of my input element after this key press using this method, and if it does not match a certain regex prevent the action.

Improve this question
15
  • 1
    The only way I can think to do this is to do what you say you don't want, and emulate the keypress on an input and then get the value of it. Commented Aug 29, 2018 at 11:04
  • 1
    @MarkSchultheiss I don't think that's it. OP is not asking how to get the cursor position after a keypress, they're asking how to process the string to change it to how it would look if the user had actually pressed the provided key while editing that string manually. Commented Aug 29, 2018 at 11:06
  • 1
    @MarkSchultheiss But you voted to close it as a duplicate?? Commented Aug 29, 2018 at 11:10
  • 1
    You can get the currently focused element, do any magic you need in the background to mimic a keypress in an input, and then set focus back to the original element, but I think you can use an element that's not part of the DOM, so you wouldn't lose focus anyway. Commented Aug 29, 2018 at 11:12
  • 1
    Have a look at my posted answer - I think you're going down a long and difficult route, and it's the wrong way to go. Commented Aug 29, 2018 at 11:47

1 Answer 1

Reset to default
1

You can validate input as it happens by handling the input event which is triggered every time there is a change in an input field, including keypresses, copy/paste, drag & drop etc..

Here's an example of validating a name input field that doesn't allow numbers...

// our validation function to stop numbers being entered
function noNumbersAllowed() {
  this.value = this.value.replace(/\d/g, "");
}

// keep a reference to the element, so we don't have to search the DOM repeatedly
var nameInput = document.getElementById("name");

// create an input event listener that removes all numbers
nameInput.addEventListener("input", noNumbersAllowed);

// set focus because we're nice like that
nameInput.focus();
<input id="name" type="text" placeholder="Enter name (no numbers)"/>

You can have multiple types of validation functions (if you need them) and assign them to whatever inputs require validation.

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

6 Comments

In my actual usecase, I have an input element where users can enter numeric values with at most 2 decimal places. So 1.00 is valid, but 1.000 is not valid, or 1..0 is not valid. So I can not validate the input by just looking at the entered character, or by modifying user input. My input box initially has a valid value and I want to prevent any actions that would cause the input value to be invalid.
Yes you can - just set the input to Number(this.value).toFixed(2); Properly validating the input is a much easier way to go than trying to second-guess input keypresses and what they may mean. Input validation has also become native since HTML5... webdesign.tutsplus.com/tutorials/…
There's also a link from ADyson in the question comments. Either method of validation will definitely be easier to implement than your original method.
Let's say the current value of the input is "1.00", and the user presses the '.' key. I can not convert "1.00." to a number, it results in NaN. Instead, I want to prevent user from entering the last '.' character at the end.
In that case, keep the last valid value stored as a data attribute on the element, and if it becomes invalid when it changes, set it back to the last valid value. These are obviously just quick examples - you can go as far as you want with what you do with it. Handling keypresses will be difficult to implement in all browsers and will definitely fail in future versions (of IE most likely). Using HTML5 patters is probably the most future-proof method.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.