Develop Reference

How to handle backspace with libphonenumber AsYouTypeFormatter

I'm trying to use google-libphonenumber's AsYouTypeFormatter with a simple input element on a web form. I pass each key typed by the user to the inputDigit method. The problem I'm running into is that when the user hits backspace, google-libphonenumber doesn't remove the last digit and simply appends Backspace to the phone number. Am I using the AsYouTypeFormatter improperly? Is it not able to deal with backspaces? If so, and I suspect that is the case, how should I handle the case where the user presses backspace?
Here is a link to an example project: https://stackblitz.com/edit/libphonenumber
And here is the code:
import { AsYouTypeFormatter } from 'google-libphonenumber';
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `
<h1>Libphonenumber Playground</h1>
<input id="input" type="text">
`;
this.formatter = new AsYouTypeFormatter('us');
const input = document.getElementById('input') as HTMLInputElement;
input.addEventListener('keyup', (event: KeyboardEvent) => {
console.log(this.formatter.inputDigit(event.key));
});

"isNumber": function(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57) || charCode === 46 || charCode === 13)) {
//do not allow non numeric characters
evt.preventDefault();
}else{
//ok: numeric character
//handle phone number masking.
this.phoneNumberForm =this.formatter.inputDigit(evt.key);
}
I haven't found any methods that will move the formatter index back.
(That doesn't mean that they are not there)
What I did was prevent the backspace keydown event. Along with any other non-numeric character. Here is the function I used:

Angular2 input accept only number when typing, but not doing the same while doing copy paste

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

Prevent keypress when Alt key plus number from Bloq number is pressed

I'm having problems avoiding the special chars (Alt + number from Bloq. num -> ☺☻♥♦♣♠•◘○)in an input.
My input is declared like this:
<html:text styleId="inputMaxVol" styleClass="numeric"/>
This is on my onReady
$(".numeric").keydown(function(event) {
return maskNumber();
});
And here is where I'm trying to do the job (with no success)
function maskNumber() {
if (event) {
var charCode = (event.which)? event.which : event.keyCode;
console.log(charCode);
// If not a number
if ((charCode < 47 || charCode > 58) && (charCode < 95 || charCode > 105)) {
console.log("not a number");
return false;
} else if (event.altKey) {
//No special characters admitted
console.log("Alt pressed");
return false;
}
} else {
return false;
}
}
If I press Alt + 1 (key "1" from the numeric pad) the white smiley face appears and in my log appears something like that
18
not a number
97
Alt pressed
I've tried too with the event.preventDefault() with no success. Any idea about where is my problem?
Thanks, I really appreciate any help you can provide.
UPDATE: As explained in comments the solution comes changing the keydown event for keypress and changing the charcode comparation numbers (Now is only if (charCode < 48 || charCode > 57) due to the numbers returned have changed too.
So the solution is as follows
$(".numeric").keypress(function(event) {
return maskNumber();
});
function maskNumber() {
if (event) {
var charCode = (event.which)? event.which : event.keyCode;
// If not a number
if (charCode < 48 || charCode > 57) {
return false;
}
} else {
return false;
}
}
Simple as that!

Try below code it will work on each browser or if you want to use library then visit this link: https://github.com/tzuryby/jquery.hotkeys
$("#txtmy").keypress(function(event) {
if (event.which.toString().length > 3) {
event.preventDefault();
return;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtmy"/>

Returning false will not disable the event.
You need to do an event.preventDefault(), which stops the event from happening, instead of returning false.
event.preventDefault();
The return false is working for an onbeforesubmit event, of a Form.

how to block specific charter inputs in ASP.NET

i have the below asp.net code to get user input then using the below javascript i have make sure that it is not kept empty by the user. now what i want do is to block user input on few characters such as (|,#,#,$) using the same javascript. any suggestion on how can i do this?
<asp:TextBox ID="txtAccountName" runat="server" Width="100%" CssClass="input" Enabled="False" onblur="CheckTxtBox(this);"></asp:TextBox>
function CheckTxtBox(sender) {
if (sender.value == "") {
alert("Please enter Address 1");
return false;
}
}

Two ways you can do this
1) In "keypress" event.Check the user press a character like (|,#,#,$)then stop them right there
2) "onblur" event: when the input element loses focus, validate its contents. If the value is invalid, display a message
Note
the second method is better because if user is copy pasting the content then the first method will not catch them
First method
function CheckTxtBox(e) {
var evt = (e) ? e : window.event;
var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
if (//charactercode of the keys as condition) {
return false;
}
return true;
};
Second Method
In your onblur event you can check your textbox value with a regular expression and validate it with regular expression.

function CheckTxtBox(e) {
var k;
document.all ? k = e.keyCode : k = e.which;
return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
}
An your asp control :
<asp:TextBox ID="txtAccountName" runat="server" Width="100%" CssClass="input" Enabled="False" onkeypress="return CheckTxtBox(event)""></asp:TextBox>

To validate keys/text entered in edit controls, Regular Expressions are recommended. Have a look at: http://www.9lessons.info/2009/03/perfect-javascript-form-validation.html for demos on few such validation examples.
But, it is not a good practice to stop the validation with the browser alone. Always do a validation at the server end. This is due to the fact that JavaScript can be disabled in browsers, which can allow non-validated data posts to the server.

i did it here is what i did. now this takes only uppercase charters from (A-Z) and numbers from (1-9). thank everyone for your help. its much appreciated.
<asp:TextBox ID="txtAccountName" runat="server"
Width="100%" CssClass="input" Enabled="False" onkeypress="return isNumber(event);"></asp:TextBox>
// this JS validates and prevent inputting symbols
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 65 || charCode > 90) && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}

Allow only number in JS and verify past

I have this function that only allows number in keypress how can i change this function ou method to call, so when i do ctrl+v verify too the values?
function isNumberKey(evt, obj) {
var containsDot = obj.value.indexOf(".");
var nrDecimals = Decimals(obj.value, ".");
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode == 8 || charCode == 9) {
return true;
} else if (charCode > 31 && (charCode < 48 || charCode > 57)) {
if (charCode == 46 && containsDot < 0) {
return true;
}
return false;
}
if (nrDecimals > 2) {
return false;
}
return true;
}
I call it this way
onkeypress="return isNumberKey(event,this);"

If you only want numbers in your input, you could do something like this:
onkeyup="this.value = this.value.replace(/[^0-9]+/, '');"
This replaces all non-number characters from the value. This does about the same as your whole function does, plus it works with the paste.
You need to change onkeypress to onkeyup.
For the full solution you need to switch to more complex code. As one of the comment below says, you can rightclick->paste aswell. This will not catch that. You need to bind multiple event (keypress, keyup, click are examples of events) to that one input. If you're lucky, focus will catch it (if rightclick blurs it, and after paste it focusses).

you can use jQuery. Change the below code as per your requirement.
$(document).ready(function() {
$("#id")
.bind('copy', function(e) {
alert('copying!');
})
.bind('paste', function(e) {
alert('pasting!');
})
.bind('cut', function(e) {
alert('cut!');
});
});
If you want to use plane javascript. I think below will work, but not sure about the browser compatibility.
<input type="text" onpaste="callFunc()" />