javascript - OnKeyDown or KeyPress, detect the location of the inserted character - Stack Overflow

admin管理员组

文章数量:1345086

I don't know if this is possible (it looks like it's not), but I'm trying to find a way to detect, inside the onKeyDown or onKeyPress event of an HTML input tag, what the resulting value will be.

It's important that I use these events. I can't just use onKeyUp, because by then the input will have already changed. I want to prevent it from happening in the first place. I've also tried appending the pressed key character to the end of the string, but that doesn't account for cases where you typed a character in the beginning of the string in the input field.

Any ideas? I've looked for a while and it doesn't seem possible but I figured I'd ask.

I don't know if this is possible (it looks like it's not), but I'm trying to find a way to detect, inside the onKeyDown or onKeyPress event of an HTML input tag, what the resulting value will be.

It's important that I use these events. I can't just use onKeyUp, because by then the input will have already changed. I want to prevent it from happening in the first place. I've also tried appending the pressed key character to the end of the string, but that doesn't account for cases where you typed a character in the beginning of the string in the input field.

Any ideas? I've looked for a while and it doesn't seem possible but I figured I'd ask.

• javascript
• html

Share Improve this question Follow asked Aug 23, 2017 at 23:56 Carlos RodriguezCarlos Rodriguez 2,22022 gold badges2020 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Here I have 2 versions, one with jQuery and other with JavaScript alone.

$("#inputJQuery").on("keydown", function(ev){
	console.log("jQuery value:", $(this).val()); // this is the value before the key is added
	console.log("jQuery selectionStart:", this.selectionStart); // the position where the character will be inserted
	console.log("jQuery selectionEnd:", this.selectionEnd); // if has a selection this value will be different than the previous
})

document.querySelector("#inputVanilla").onkeydown = function(ev){
	console.log("VANILLA value:", this.value); // this is the value before the key is added
	console.log("VANILLA selectionStart:", this.selectionStart); // the position where the character will be inserted
	console.log("VANILLA selectionEnd:", this.selectionEnd); // if has a selection this value will be different than the previous
}

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="inputJQuery" type="text"/>
<input id="inputVanilla" type="text"/>

Simply check for the length of the value on keydown. This also works for deleting characters.

You can also check against this in a conditional that returns false to prevent the user from typing in more than a certain number of characters. Note that you'll probably want to check this against the backspace and delete keys (keyCodes 8 and 46 respectively) so that you're able to delete keys once the maximum length is reached.

var input = document.getElementById('input');
input.onkeydown = function(e) {
  console.log(input.value.length);
  if (input.value.length == 10) {
    if (e.keyCode === 8 || e.keyCode === 46) {
      return true;
    } else {
      return false;
    }
  }
}

<input id="input">

Hope this helps! :)

本文标签： javascriptOnKeyDown or KeyPressdetect the location of the inserted characterStack Overflow