If I had an input field like so for example:
<input id="inputBox" type="text">
And the user enters 'abc' for example, how can I change this immediately to '123'? I want this to happen as soon as soon as the user enters 'abc'.
How can I do this?
4 Answers
Hope this will help you, use keyup event to get entered value
$("#inputBox").on("keyup", function(){
if($(this).val() == "abc")
$(this).val("123");
})
You could do something like this:
HTML:
<input id="inputBox" type="text">
JS/jQuery:
$(document).on('keydown', '#inputBox', function(){
$(this).val("Your new value");
return false;
});
https://jsfiddle.net/j0ug8y3e/
There is a 'change' event on jQuery, but it's only called when the input has lost it's focus, so using a keydown, keypressed or keyup is better.
1 Comment
Devaffair
This answer is much more elaborated. please just change $("#inputBox") to $(this) and it's perfect.
$( "#inputBox" ).keyup(function() {
if($(this).val() == "abc") {
$(this).val("123");
}
});
Comments
This is the full solution, it will convert each letter to its numerical value as you type:
const input = $('#inputBox');
input.keyup(event => {
input.val(processContents(input.val()));
});
function processContents(value) {
let contents = value.split('');
contents.forEach((char, index) => {
var charPos = char.toLowerCase().charCodeAt(0);
console.log(charPos);
if (charPos >= 97 && charPos <= 122) {
contents[index] = charPos - 96;
}
});
return contents.join('');
}
onkeyuporonkeydown