We Keep Coding

Phone number input mask in JS

I'm trying to figure out where the number 1 comes from (in the example below you write any phone number and press Backspace many times). Can you please tell me what is wrong in this code?
const input = document.querySelector('input[name="phone"]');
input.addEventListener('input', function () {
let x = input.value;
x = x.replace(/^\+1 /, '');
x = x.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
x = !x[2] ? x[1] : x[1] + ' ' + x[2] + (x[3] ? `-${x[3]}` : '') + (x[4] ? `-${x[4]}` : '');
x = x.startsWith('+1 ') ? x : '+1 ' + x;
input.value = x;
});
<input name="phone" placeholder="Phone number">

You need remove it on your code.
phone = phone.replace(/^\+1 /, '')
Also:
phone = phone.startsWith('+1 ') ? phone : '+1 ' + phone;

You had to replace the line:
x = x.replace(/^\+1 /, '');
to:
x = x.replace(/^\+1/, '');
(remove the space)

ng-keyup is not working at rendering side

Here is my code in HTML (Angular):
<input ng-value="minLoanRange" tabindex="1" lable-up id="minLoanRange" class="inputMaterial" ng-model="minLoanRange" ng-disabled="activeType" type="number" max-length-handler required value="" ng-keyup="addCommas(minLoanRange)"/>
Here is my code of addCommas:
$scope.addCommas = function(nStr){
nStr+='';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while(rgx.test(x1)){
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
$scope.minLoanRange = x1+x2;
}
I have put an alert just before $scope.minLoanRange = x1+x2; like alert(x1+x2); It is working properly, just not reflecting on screen.

You don't need value="" and ng-value. Because ng-model supports two way binding. if you assign correct value to that model object. its automatically reflect to html.
I have copied the snippet from #lex answer and made some changes
angular.module('app', [])
.controller('controller', function($scope) {
$scope.modelValue = 0;
$scope.commaValue = '';
$scope.addComma = function() {
let nStr = '' + $scope.modelValue.replace(',', '');
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
$scope.modelValue = x1 + x2;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<input ng-model="modelValue" ng-keyup="addComma()">
</div>

You need to use two different variables - one for the model value and one for the value. Here's a working snippet to demonstrate how you can accomplish what you're after.
angular.module('app', [])
.controller('controller', function($scope) {
$scope.modelValue = 0;
$scope.commaValue = '';
$scope.addComma = function() {
let nStr = '' + $scope.modelValue.replace(',', '');
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
$scope.commaValue = x1 + x2;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<input ng-value="commaValue" ng-model="modelValue" ng-keyup="addComma()">
</div>

how to show minus currency in brackets

I have variable which is negative numbers after $ sign (actually it shows currency with currency sign). Please tell me how to show minus currency in brackets with currency sign. I mean to say how to change var val=($125,220,328.00)
My code is looks like this
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
function netAmount(){
var net_amount =0;
$('#productList tr:gt(1)').each(function() {
var row_index= $(this).index();
var qty= $('#productList tr:eq('+row_index+') td input[name="quantity"]').val().replace( /[^0-9\.]/g, '' );
var price= $('#productList tr:eq('+row_index+') td input[name="purchase_price"]').val().replace( /[^0-9\.]/g, '' );
net_amount+= +(parseFloat(qty*price).toFixed(2));
$('input[name="net_ammount"]').val('$'+ addCommas(parseFloat(net_amount).toFixed(2)));
});
}
Now i want if net_amount is looks like -123225.32 then it show in input[name="net_ammount"] as ($123,225.32)

Your regexp doesn't match the minus sign, therefore it is not added in the replacement. Change the regexp to this:
var rgx = /(-?\d+)(\d{3})/;

how to convert * to 000 in currency textbox?

I have currency text box in asp.net
I use :
<script type="text/javascript">
function Comma(Num) { //function to add commas to textboxes
Num += '';
Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', '');
Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', '');
x = Num.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1))
x1 = x1.replace(rgx, '$1' + ',' + '$2');
return x1 + x2;
}
</script>
and
<asp:TextBox ID="amountTextBox" runat="server" onkeyup = "javascript:this.value=Comma(this.value);"></asp:TextBox>
it works and hasn't any problem, but I want when user press *, instead of * be written '000' in text box. how to do this work?

I hope this is what you need
<script type="text/javascript">
function Comma(Num) { //function to add commas to textboxes
if (Num.indexOf("*") != -1) {
Num = document.getElementById('amountTextBox').value.substring(0, Num.indexOf("*")) + '000';
}
Num += '';
Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', '');
Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', '');
x = Num.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1))
x1 = x1.replace(rgx, '$1' + ',' + '$2');
return x1 + x2;
}
</script>

Interesting behavior in my US Number formatting code

I'm trying to make 10 digits look like a US telephone number (i.e.(###) ###-####). My code does accomplish this first goal, but it also does something I can't quite figure out. When typing in the digits, the characters "()" show up before typing any other digits. I want the open parenthesis to appear first and the closing parathesis to appear after entering the third digit. Please don't give me a new solution; try to pin point the issue I'm describing.
<script type="text/javascript">
$('.drumbi-caller-number').live('keydown', function (event) {
if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39) {
} else {
inputval = $(this).val();
var string = inputval.replace(/[^0-9]/g, "");
var first3 = string.substring(0,3);
var next3 = string.substring(3,6);
var next4 = string.substring(6,9);
var string = ("(" + first3 + ")" + next3 + "-" + next4);
$(this).val(string);
}
});
</script>
Here's a jsFiddle that displays this behavior: http://jsfiddle.net/bigthyme/j6kHn/3/

replace keydown with keyup, on keydown the value of the input element isn't updated
also set your string conditionally, only if long enough:
var string = string.length > 2 ? ("(" + first3 + ")" + next3 + "-" + next4) : first3;
here is the code: http://jsfiddle.net/j6kHn/10
btw: you should also replace .live(...) with .on(...) as .live() is deprecated..

You need to check the length of first3 before appending the paren:
var string = ("(" + first3 + ((first3.length>=3)?")":"") + next3 + "-" + next4);
And although not in your question, you can do the same for the hyphen:
var string = ("(" + first3 +
// only append the ) if the you have 3+ chars
((first3.length>=3)?")":"") +
next3 +
// only append the - if the you have 6+ chars
(((first3+next3).length>=6)?"-":"") +
next4);
You should also use .on() instead of live();
See it all working in this jsFiddle

Go with
$('.foo').on('keyup', function (event) {
$(this).val($(this).val().replace(/\D/g, "").replace(/(\d{0,3})(\d{0,3})(\d{0,4}).*/, "($1) $2-$3"));
});
Test this code here.

Try using this code, it should fix all of your issues:
Demo: http://jsfiddle.net/bN6Rh/3/
jQuery:
$('.foo').on('keyup', function(event) {
if (event.keyCode == (8 || 37 || 39)) { }
else {
inputval = $(this).val();
var string = inputval.replace(/[^0-9]/g, "");
var first3 = string.substring(0, 3);
var next3 = " " + string.substring(3, 6);
var next4 = string.substring(6, 10);
if (string.length < 3) { // Less than 3
var string = "(" + first3;
}
else if (string.length > 2 && string.length < 7) { // More than 2 and less than 7
var string = "(" + first3 + ")" + next3;
}
else { // Anything else
var string = "(" + first3 + ")" + next3 + "-" + next4;
}
$(this).val(string);
}
});​
The problem was that you weren't checking the number of characters so as soon as anything was entered it put in ()-, the above code also adds the space you mentioned wanting.
The code could of course be more compressed:
$('.foo').on('keyup', function(e) {
if (e.keyCode == (8 || 37 || 39));
else {
var str = this.value.replace(/[^0-9]/g, "");
var f3 = str.substring(0, 3),
n3 = " " + str.substring(3, 6),
n4 = str.substring(6, 10);
if (str.length<3) str = "(" + f3;
else if (str.length>2&&str.length<7) str="("+f3+")"+n3;
else str="("+f3+")"+n3+"-"+n4;
this.value = str;
}
});​