I have a textbox setup the following way:
<input type="text" name="CardNumber" id="CardNumber" maxlength="7" onkeypress="if(isNaN(this.value+String.fromCharCode(event.keyCode))) return false;" onblur="ValidateCardNumber()"/>
(note: ValidateCardNumber() is a separate function that checks the length among other things, but it isn't part of limiting the field to numerical values).
This works fine in IE. It will allow me to enter numbers but ignores a non-numerical keypress.
In Firefox, it I can't enter anything into that textbox.
Any thoughts?
I'm open to a different means to the end.
Thanks.
Debugging will show you the problem
console.log(this.value+String.fromCharCode(event.keyCode));
looking at the console you would see
So now look at what it is returning
console.log(this.value, event.keyCode);
So the key code is always returning zero.
What you need to do is use event.which for firefox
console.log(this.value+String.fromCharCode(event.which || event.keyCode));
Related
I'm running into a strange issue on Safari while creating a custom React number input component. We have two buttons that, on click, call stepUp and stepDown on an input element. Here is an example:
<button onclick="document.getElementById('myInputId').stepDown()">-</button>
<input id="myInputId" type="number" />
<button onclick="document.getElementById('myInputId').stepUp()">+</button>
https://codesandbox.io/s/great-mccarthy-s2ybz
Using macOS Safari, when the input box is empty and stepUp/stepDown is called, I get the error
InvalidStateError: The object is in an invalid state.
This issue seems to affect (at least) Safari 14.0.1 to latest.
I am able to work around this by, on click, setting the value of the element to 0 if empty and then calling stepDown/stepUp, but I am wondering if there is something I am doing wrong here that might save me from having to implement this extra step.
Thanks in advance!
the best solution for handling this is exactly what you mentioned. Setting the value of the input to 0.
From Apple's document archive, the number input is expecting a match of \d* or [0-9]*. This was the latest documentation I could find, I hope this helps!
<button onclick="document.getElementById('myInputId').stepDown()">-</button>
<input id="myInputId" type="number" value="0" />
<button onclick="document.getElementById('myInputId').stepUp()">+</button>
<input type="text"> brings up this keyboard:
while <input type="number"> brings up this one:
Is there a way to keep the input type text and invoke the second keyboard? perhaps with a pattern attribute?
My issue with input type="number" is that the user is expected to input fractions and $("#input_id").val(); is having trouble with space and forward slash, e.g 3 5/6 returns 3 and 7/13 returns 7.
if this can be bypassed i can also work with that.
<input type="text"> will always invoke primary keyboard.
What you can do is:
Prevent user from typing any character other than 0-9 and .(dot) by
checking keycode or by regular expression
eg: [0-9][.][0-9]{1-2} returns true for one or two decimal places.
Add some validation rule to the input field and show error when user submits the form
Given a page with the following element:
<input name="my_field" type="password">
Obviously, I see only the dots in the browser. Is there a way to fetch the value from the developer console?
This will work for you
document.getElementsByName('my_field')[0].value
You may try this:
document.getElementsByName('my_field')[0].value
You can also do
document.getElementsByName("my_field")[0].type = "text"
Which will make the password field cleartext.
But the shortest way is to this is: Right click to the password field, click Inspect Element, find the type="password" and make it type="text"
Last one requires minimum time and typing, but the rest works too
I ran into a problem the other day when building a form.
The input box has a type "number".
In Chrome the input field displays up/down arrows. I could not detect change when either the up or down buttons were clicked, so I used CSS to remove the buttons. That was pretty simple, but it did not resolve all of my problems.
I do some validation on the field (using keyup). If I enter a number in the field it works fine, but if I enter a letter into the field I cannot detect it.
Using .val() works fine in FF and IE to get the field's value (number or letter), but in Chrome, not so much.
If there is a letter in the field I cannot find a way to clear the field either. Using .val('') simply moves the cursor to the left.
As I said, this problem is specific to using Chrome. For all other browsers my code works fine.
Any suggestions on code that can be used to resolve this problem?
The issue all revolves around the input being of type "number".
The HTML5 draft defines:
The value sanitization algorithm is as follows: If the value of the element is not a valid floating point number, then set it to the empty string instead.
http://www.w3.org/TR/html5/forms.html#number-state
Trying to do a .val() to retrieve a type=number input that has a non-number in it will only return the empty string. It looks like Chrome's implementation of this is to set the value of the field to empty string before any value can actually be retrieved.
As far as resetting the field using .val('') and keyup not being recognized, this code seems to work http://jsfiddle.net/hVVSA/2/
JS
var $input = $('input').keyup(function(){
console.log("here");
});
$('#clearfield').click(function(){
console.log('val was '+$input.val());
$input.val('');
});
HTML
<input type="number" />
<button id="clearfield">clear</button>
I am working in Javascript. I am trying to make a function on the keypress event. I want to make function for validation on mobile number. I want to allow only digits in it. I also want to allow ctrl+v and ctrl+a in this but I dont want to allow V and A as characters.
I have seen many answers here but no one is purely same.
If you only care that digits are entered, as it seems from your question, this Jquery code will work.
It uses on keyup() and thus it will work on ctrl+v as well. It won't work if someone uses right-click to paste, and for that reason, you can just disable right clicking on that field.
It works by stripping off the last character of the input value if it is not a number. So if a user enters 25s or 25ss, it will get stripped down to 25.
Live Demo
The Jquery
$(document).ready(function(){
$('#number').keyup(function(){
var input = this.value;
while (isNaN(input))
{
input = input.substring(0,input.length-1);
$('#number').val(input);
}
});
//disable right click on the field
$('#number').bind("contextmenu",function(e){
return false;
});
});
You can use HTML5 input tags which use the pattern attribute.
<form>
<input name="name" value="" pattern="\d+" required/>
<input type="submit"/>
</form>