Develop Reference

I have two input elements with class "inputWithLimit". Why would both be firing simultaneously and logging '0' as val().length?

$(document).ready(function() {
$(".inputWithLimit").each(() => {
var inp = this;
inp.addEventListener("input",
function (event){
console.log($(inp).val().length);
});
});
})
I've also tried "keyup" and "change" as event handlers, and in both other cases, jquery is doing a strange thing with assigning these listeners. Thanks.

If you are using jQuery then there is no need to loop through each element and add an event listener. An example which logs the value of each input when you input something.
$(document).ready(function() {
$(".inputWithLimit").on('input',function() {
console.log(this.value);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputWithLimit">
<input class="inputWithLimit">

The problem is your arrow function. When using arrow function, then you can't use `this'
$(".inputWithLimit").on("input", function() {
console.log($(this).val().length);
});
I've also made your code shorter.
Demo
$(document).ready(function() {
$(".inputWithLimit").on("input", function() {
console.log($(this).val().length);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputWithLimit" />

keypress event not working with the last inserted character

I made this code:
$(".SermeCoopConvertirMayuscula").keypress(function (e) {
$(this).val($(this).val().toUpperCase());
regexp = /^[A-Z0-9 ]*$/;
return regexp.test($(this).val());
});
It is working fine. But when i type something it doesn't update my last inserted character. How can i make that the last character is added?
I need use the keypress event, i cant use the keyup event.

True, because when function is called the field is not updated with the value
The event is called in this steps
Keydown
Keypress
updateview
Keypress
updateview
keyup
So if you can change this event to keyup then you will get the latest value
Or, if you still want to use keypress event that you can do one thing you can use the following code
$(".SermeCoopConvertirMayuscula").keypress(function (eventObject) {
var val = $(this).val() + eventObject.key;
val =val.toUpperCase()
var regexp1 = /^[A-Z0-9 ]*$/;
var regexp2 = /^[A-Za-z0-9 ]$/;
if(regexp1.test(val) && regexp2.test(eventObject.key)) {
$(this).val(val);
}
return false;
});

Use keyup() instead. when keypress() is fired, the most recent character is still not registered in the input, so $(this).val() will not include it for the most recent event
$("input").keyup(function (e) {
$(this).val($(this).val().toUpperCase());
regexp = /^[A-Z0-9 ]*$/;
return regexp.test($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input/>

You could also try input which also takes care of various other input scenarios. Take a look at this for more details.
$(".SermeCoopConvertirMayuscula").on("input", function (e) {
$(this).val($(this).val().toUpperCase());
regexp = /^[A-Z0-9 ]*$/;
return regexp.test($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="SermeCoopConvertirMayuscula" />

Jquery - First letter should not be Numeric

In a textbox first character should not be number. So I have following code for this :-
DEMO
$('#FieldName').keyup(function (e) {
if ($(this).val().length === 1 && $.isNumeric($(this).val())) {
$(this).val('');
alert('First letter should not be Numeric.!');
}
});
The above code works but not when typed fast. Try typing fast numbers in the fiddle. It will accept numbers.
What is solution for this?

Try this one. Only takes the first letter of typed text with slice(0,1): and validates.
$('#FieldName').keyup(function(e) {
if ($.isNumeric($(this).val().slice(0, 1))) {
$(this).val('');
alert('First letter should not be Numeric.!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="FieldName" />

Simple solution with RegEx
$(function() {
$('.notFirst').on('input', function() {
this.value = this.value.replace(/^(\d+)/, '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="notFirst" />

$('#FieldName').keypress(function (e) {
if ($(this).val().length === 1 && $.isNumeric($(this).val())) {
$(this).val('');
e.preventDefault();
alert('First letter should not be Numeric.!');
}
});
Add e.preventDefault() inside your function.
Demo:
http://jsfiddle.net/b653oo8c/

Since the problem is when the person types fast, I assume it is a performance issue.
To fix it, you can do like this:
$('#FieldName').keydown(function(){
if(this.value.length==1 && this.value<<0==this.value)
{
this.value='';
alert('First letter should not be Numeric.!');
}
});
Your code should run AS FAST AS POSSIBLE inside the event handler!
Using jQuery, you only slow down your code.
Not caching $(this) slows down even more!
I use jQuery just to combat the cross-browser issues, and use the sugested keydown event.
One could use this, and would work just fine:
document.getElementById('FieldName').onkeydown=function(){
if(this.value.length==1 && this.value<<0==this.value)
{
this.value='';
alert('First letter should not be Numeric.!');
}
}
According to #Kaiido, it is a problem when checking the length when the keyup event fires.
If we keep the performance in sight, we could just get rid of the length check:
document.getElementById('FieldName').onkeydown=function(){
if(this.value.charAt(0)+1)//if it is a number, it will add 1, making it check as true
{
this.value='';
alert('First letter should not be Numeric.!');
}
});

Change the keyup() event to keydown(). This should help.
$('#FieldName').keydown(function (e) {
if ($(this).val().length === 1 && $.isNumeric($(this).val())) {
$(this).val('');
alert('First letter should not be Numeric.!');
}
});

Javascript - get value from textbox at every keypress

I have a textbox and I want to use the data in it every time something is entered; letter by letter.
What is happening is that when a value is entered, the Javascript is being executed before the value is actually put into the textbox, meaning that it always lags one character behind.
$(document).ready(
function() {
$('#test').keypress(
function() {
var value = document.getElementById('test').value;
alert(value);
});
})
<input id="test" type="text" />
Here's whats happening:
input alert
w ""
e "w"
a "we"
l "wea"
t "weal"
h "wealt"
Whereas I want it to happen dynamically; i.e. when I enter "w" I want the alert to contain "w" immediately after.

keypress happens before the change, yes. keyup happens after. Listen to that instead.

use keyup
$(document).ready(
function() {
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});
})

You should try keyup event, because keypress happens before symbol is being input in a textbox

Use keyup to read the valid after something has been entered. Here's how to do it with jQuery:
$(document).ready(function() {
$('#test').keyup(function() {
alert($(this).val());
});
});
Demo

Use the keyup event instead -:
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});

Use keyup instead, take a look at this:
http://jsfiddle.net/gEBc4/1/

use keyup instead
that will work
$(document).ready(
function() {
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});
})

Try using 'keyup' event instead of 'keypress'.
Change to:
$(document).ready(
function() {
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});
});
Working plunk.

Trigger a function on key up on any input

I want a javascript function to be triggered on key up on any input box. I tried using getElementsByTagName.onkeyup but it didn't work. Along with the solution please send a working jsfiddle. I don't want document.getElementById or onkeyup="function()" as there are many input boxes. It wont look tidy. I even tried
$(document).ready(function(){
$('input').onkeyup(function(){
calculate();
})
})
I also want a function that will add 0 to the value of each input on window.onload.
Thank You

DEMO There is no onkeyup event in jQuery tru to change to keyup
$(document).ready(function(){
$('input').keyup(function(){
calculate();
})
})
.keyup()

try
document.onkeyup = function () {
if (document.activeElement.tagName.toUpperCase() !== 'input') return;
// do sth. here
}

This should do the keyup part:
http://jsfiddle.net/pwqx7/
$(function() {
$('input').bind('keyup', function() {
alert($(this).attr('id'));
});
});

Try
$(document).ready(function() {
$(document).on('keyup', 'input', function() {
calculate();
})
})
Demo: Fiddle