mobVerificationView.validateNumerals = function(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode < 48 || charCode > 58) && charCode != 8 && charCode != 9)
{
evt.preventDefault();
}
return ;
}
This works just fine on any browser on the computer, but this doesn't work on mobile.
The function is getting called on the key press , and I have verified the charCode to be accurate. I added breakpoints and the preventDefault() is called and executed as well however the character are still being printed.
I have used a onkeydown in the HTML tag:
<input type="text" tabindex="-1"
maxlength="10" placeholder="New Mobile Number" class="txt_otp
update_input" id="txt_newmobile"
onkeydown="javascript:mobVerificationView.validateNumerals(event)"/>
Related
I am working in angular project have below function
isNumber(evt) {
evt = (evt) ? evt : window.event;
let charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
and in HTML
<input type="text" class="form-control" id="abc" name="abc"
formControlName="abc" maxlength="4" pattern="\d[0-9]+"(keypress)="isNumber($event)"/>
It works on all browsers except in the Samsung internet browser in Android phones. It still accepting alphabets which I do not want. Please help me with this. Thanks in advance
"If you're having trouble accessing webpages or getting errors about Javascript on your mobile device or tablet, see the steps below on how to enable Javascript in Samsung Internet Browser..."
Have you tried to turn on JavaScript like Samsung explains it: https://www.samsung.com/au/support/mobile-devices/how-do-i-turn-on-javascript/
I have created an input field like as shown below in Angular2 which should accept only numbers.
html
<input type="text" name="streetCode" ngModel [maxlength]="2" (keypress)="onlyNumber($event)">
typescipt
onlyNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
The above code is working fine and allows only number from keyboard, but the issue is that when I do copy paste of some alphabet character onto to the input field it is allowing alphabets.
Update 1:
Actually when I say copy paste, its through mouse copy paste and not through keyboard.
Can anyone please help me on this
Update 2
Right now I have modified the code as shown below, Don't know whether this is a right approach:
onlyNumber(evt) {
if (evt.type === 'paste') {
let content = evt.clipboardData.getData('Text');
if (isNaN(content)) {
evt.preventDefault();
}
}
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
evt.preventDefault();
}
}
HTML
<input type="text" name="streetCode" ngModel [maxlength]="2" (keypress)="onlyNumber($event)" (paste)="onlyNumber($event)">
Why don't you use type="number" instead of text. In that case you don't need the keypress event. It is a pure html syntax.
In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers.
So I guess the suggestion is to use keydown/keyup events instead of keypress if you want to also listen paste event if you don't want to use
type="number" instead of text.
Your function onlyNumber will get triggered only on keypress event
That's the reason why it's not working on copy paste
Try using ngModelChange instead of keypress
Hi i have a function which accepts numbers but there's a few problems with it.
1) i want it to accept slashes i.e. '/'?
2) On the first input it accepts letters for some reason.
it binded to a knockout keyup function.
<input id="txtboxToFilter" type="text" placeholder="dd/mm/yyyy" maxlength="10" data-bind="value: Observable.birthdate(), valueUpdate: 'keyup', event: { keyup: CheckDate}" />
Which then calls this function.
function CheckDate(){
document.getElementById('txtboxToFilter').onkeydown = function(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
}
Any body help?
You can certainly use Regex:
here is one which will support leap years as well :)
^(?:(?:31(\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$
JS code:
document.getElementById('txtboxToFilter').onblur= function(e) {
alert(validateDate(document.getElementById('txtboxToFilter').value));
}
function validateDate(dob) {
var re = /^(?:(?:31(\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/;
return re.test(dob);
}
fiddle: http://jsfiddle.net/exe0m3ek/
NOTE: I have changed the event from keyup to blur, If you only want
this on keyup...please change accordingly.
I'm using the commonly used Javascript function to allow only numbers to be inputted into a text field:
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
I call this onkeypress and it prevents anything but numbers to display. I'm trying to alter it so it will allow me to also put dashes (-) into the text field. The dash keycode is 189 so I tried this:
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode != 189 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
Thinking that the conditional statement would then accept the dash character but that didn't seem to work. Any ideas on why this would be? Thanks for your help!
If you're using the keypress event you need to use the character code 45 for dash/hyphen.
If you're using the keydown/keyup events then you need to use 109 and 189 to cover the minus key in the numeric keypad and the one (usually) located above the P key.
if (charCode != 46 && charCode != 45 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
Demo: http://jsfiddle.net/J6B7U/
If you have doubts about which keycode is which a console.log(charCode); in your function will help you debug.
(Note also that trapping a key event is not enough to prevent invalid data being entered, because the user may change the field using the browser's edit menu or drag'n'drop.)
try this
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode != 45 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
in html
<input type="text" onkeypress="return isNumberKey(event)">
You want to use the character code for the dash, which is 45, not the keycode.
this code for only number types
<input onkeypress="return isNumberKey(event);">
<script>
function isNumberKey(evt)
{
var t = (evt.which) ? evt.which : event.keyCode;
return !(t > 31 && (t < 48 || t > 57))
}
</script>
This came up when I was asking, so it might be worth adding here that keyCode and charCode are deprecated, as at this time.
A better way of adding the check or implementing an isNumberKey function that also accepts the '-' character could be:
const isNumberKey = (event: KeyboardEvent) =>
((event.key.length > 1) || event.key.match(/^\d|-$/))
This way, we check allow special keys do their function, while making sure only numbers are allowed when single character keys are pressed.
This doesn't work well with mobile devices. For example, Chrome on Android will bring up the number keypad rather than the full keyboard when the input type is set to "number". You could try using input type="tel" instead. It would allow numbers 0-9, the - and (). It would also bring up the dial pad on Android. Haven't tested on iPhone.
I've come up with the following code to restrict a currency input. A user can use home, end and arrow keys, but ctrl + a is blocked because FireFox isn't recognizing the key combination. This works correctly in Chrome and IE.
Is there a way to allow select all in a field in FireFox or is this a bug in FireFox? (or perhaps a bug in other browsers that I'm 'exploiting'?)
function autoFormatNumeric(field, e) {
var charCode = e.which ? e.which : field.keyCode;
if ((charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) ) {
e.preventDefault();
}
}
$("#myInput").on('focus',function(){
$(this).select(); // <- This jquery function select all even in firefox
});