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

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()" />

Input text field that only accepts numbers AND the dash character

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.