Develop Reference

Textbox Maxlength Issue for amount field

I have a situation having a textbox having 15 as a max length property. That field works as a amount field. it is working correctly in normal cases.
lets say if i enter 11234567890.99 this amount in textbox it displays it as 112,34,567,890.99 which is expected.
But, if i copy & paste 112,34,567,890.99 amount in textbox last two digits gets truncated because the length gets out of bound.
Is there any ways to change this without modifying the exact behavior? allowing to paste whole 112,34,567,890.99 amount.
$(document).on("focusout","#txtformate1",(function () {
if (this.value != null && this.value != "") {
$((this.parentElement).nextElementSibling).hide()
}
else{
$((this.parentElement).nextElementSibling).show()
}
}));
$(document).on('keyup', '.Amt', function () {
var val = $(this).val();
val = val.replace(/([~!#$%^&*()_+=`{}\[\]\|\\:;'<>,\/? ])+/g, '');
if(isNaN(val) && val!="-")
{
val="";
}
$(this).val(val);
/*if (isNaN(val)) {
val = val.replace(/(?!^)-/g, '');
if(val.indexOf("-")>-1)
{
val = val.replace(/[`*\/]/g, '');
}
else{val = val.replace(/[^0-9\.]/g, '');}
if (val.split('.').length > 2)
{
val = val.replace(/\.+$/, "");
}
else if(val==".")
{
val ="";
}
}*/
});
$(document).on('focusout', '.Amt', function () {
var val = $(this).val();
val = val.replace(/(?!^)-/g, '');
if(isNaN(val) && val.indexOf(',')>-1){
val=$(this).val();
}
if (val == "0.00"){
val="";
}
$(this).val(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control Amt" id="txtformate1" maxlength="15" />`

html Input type number with Thousand Separator

i want to add thousand separator on keyup event in input type number
but this work just in 6 character, if more than 6 character, value on input has reseted
this my short code
<input type="number" id="tanpa-rupiah" step="any">
var dengan_rupiah = document.getElementById('dengan-rupiah');
dengan_rupiah.addEventListener('keyup', function(e)
{
dengan_rupiah.value = formatRupiah(this.value, 'Rp. ');
});
function formatRupiah(bilangan, prefix)
{
var number_string = bilangan.replace(/[^,\d]/g, '').toString(),
split = number_string.split(','),
sisa = split[0].length % 3,
rupiah = split[0].substr(0, sisa),
ribuan = split[0].substr(sisa).match(/\d{1,3}/gi);
if (ribuan) {
separator = sisa ? '.' : '';
rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
}
this my fiddle https://jsfiddle.net/C2heg/4619/

This might suit you. On keydown prevent the default action if it is not a number key. On keyup, parse the value and update it. Use the data- attributes to store and get the original value.
var elem = document.getElementById("num");
elem.addEventListener("keydown",function(event){
var key = event.which;
if((key<48 || key>57) && key != 8) event.preventDefault();
});
elem.addEventListener("keyup",function(event){
var value = this.value.replace(/,/g,"");
this.dataset.currentValue=parseInt(value);
var caret = value.length-1;
while((caret-3)>-1)
{
caret -= 3;
value = value.split('');
value.splice(caret+1,0,",");
value = value.join('');
}
this.value = value;
});
function showValue()
{
console.log(document.getElementById("num").dataset.currentValue);
}
<input type="text" id="num" maxlength="30">
<button onclick="showValue()">Get Value</button>

Ok I have posted answer below. I have added limit of 20 numbers. You can change it as per your need.
You can use Number.toLocaleString() for this purpose.
Below is working example:
// When ready.
$(function() {
var extra = 0;
var $input = $("#amount");
$input.on("keyup", function(event) {
// When user select text in the document, also abort.
var selection = window.getSelection().toString();
if (selection !== '') {
return;
}
// When the arrow keys are pressed, abort.
if ($.inArray(event.keyCode, [38, 40, 37, 39]) !== -1) {
if (event.keyCode == 38) {
extra = 1000;
} else if (event.keyCode == 40) {
extra = -1000;
} else {
return;
}
}
var $this = $(this);
// Get the value.
var input = $this.val();
var input = input.replace(/[\D\s\._\-]+/g, "");
input = input ? parseInt(input, 10) : 0;
input += extra;
extra = 0;
$this.val(function() {
return (input === 0) ? "" : input.toLocaleString("en-US");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="amount" name="amount" type="text" maxlength="20" />

change your the input type equal to "text" then its work
<input type="text" id="tanpa-rupiah" step="any">
checkout jsfiddle

Shorten javascript code teaser

I have five input fields. When you delete the content from, let say first, that first input field is populated with input field 2, and the input field 5 is then empty. Again, if you delete the content from the first input field, the content from second goes into the first, and now you have input field four and five empty. And I need that five input field to disappear, to have left only one empty input field. And then again if the third and fourth element are empty, forth should disappear, and so on till there is only first input field left. So, I solve this with hard coded values:
if ((document.getElementsByClassName('requestRightsTitle4')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail4')[0].value == ''))
{
displayInputField('none', 5);
}
if (
(document.getElementsByClassName('requestRightsTitle3')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail3')[0].value == '')
&& (document.getElementsByClassName('requestRightsTitle4')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail4')[0].value == '')
)
{
displayInputField('none', 4);
}
if (
(document.getElementsByClassName('requestRightsTitle2')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail2')[0].value == '')
&& (document.getElementsByClassName('requestRightsTitle3')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail3')[0].value == '')
&& (document.getElementsByClassName('requestRightsTitle4')[0].value == '')
&& (document.getElementsByClassName('requestRightsEmail4')[0].value == '')
)
{
displayInputField('none', 3);
}
And now I would like to shorten this code like a real programmer but I don't have the time (sending me to another project) or skills to do so. But I would really like to learn how would that be possible, something like:
for (let i = 0; i < 5; i++) {
if (document.getElementsByClassName('requestRightsTitle' + i)[0].value == ''
&& document.getElementsByClassName('requestRightsEmail' + i)[0].value == '')
displayInputField('none', (i+1));
}

You can set up a listener on all your input fields. If a field is emptied, shift all remaining values to the left and determine which fields need to be displayed (i.e. all fields that have a value and the first empty field).
Here's a complete standalone snippet:
const action = (inputs) => {
const listener = () => {
const values = inputs.map(input => input.value).filter(v => v);
inputs.forEach((input, i) => {
input.value = values[i] || '';
input.style.display = values[i] || !i || values[i - 1] ? '' : 'none';
});
};
inputs.forEach((input, i) => input.addEventListener('input', listener));
};
action([...document.querySelectorAll('input')]);
<input value="One">
<input value="Two">
<input value="Three">
<input value="Four">
<input value="Five">

Better to use querySelector when you only want to select the first element. I'd make an object with the value of each element, and then check the object values:
const valsAreEmpty = ...vals => vals.every(val => val === '');
const vals = [
'requestRightsEmail2',
'requestRightsEmail3',
'requestRightsEmail4',
'requestRightsTitle2',
'requestRightsTitle3',
'requestRightsTitle4',
].map(classStr => document.querySelector('.' + classStr).value);
if (valsAreEmpty(
vals.requestRightsTitle4,
vals.requestRightsEmail4
)) {
displayInputField('none', 5);
}
if (valsAreEmpty(
vals.requestRightsTitle3,
vals.requestRightsEmail3,
vals.requestRightsTitle4,
vals.requestRightsEmail4
)) {
displayInputField('none', 4);
}
// etc
If there are even more Email# and Title# elements, you might use a loop to create the vals instead.

Some remarks :
it looks like you are using html classes to identify single elements in your page
you can use html classes more generically :
<input class="requestRightsTitle" />
<input class="requestRightsEmail" />
<input class="requestRightsTitle" />
<input class="requestRightsEmail" />
<input class="requestRightsTitle" />
<input class="requestRightsEmail" />
<input class="requestRightsTitle" />
<input class="requestRightsEmail" />
On the javascript side : document.getElementsByClassName('requestRightsEmail') will give you a useful array :
let emailInputs = document.getElementsByClassName('requestRightsEmail');
emailInputs[0].value = ...
emailInputs[1].value = ...
emailInputs[2].value = ...
...
// note : this array will be 0-indexed.
// emailInputs[0] will match your 'requestRightsEmail1'
This will probably help you on the css side too.
then you can more easily build and scan arrays of values
e.g :
let titles = document.getElementsByClassName('requestRightsTitle')
.map( e => e.value )
let emails = document.getElementsByClassName('requestRightsEmail')
.map( e => e.value )
// as said above : '3' matches 'requestRights4'
if (titles[3] == '' && emails[3] == '') {
displayInputField('none', 5);
}
if ( titles[2] == '' && emails[2] == ''
&& titles[3] == '' && emails[3] == '') {
displayInputField('none', 4);
}
you can then more easily put this in a loop
a final note, on what your sample does, and how you can rewrite it :
if requestRightsEmail3 is not empty, you already know that all the tests which include requestRightsEmail3 will return false.
So another way to look at your loop is :
if i is not empty, stop here, otherwise, show those extra fields :
for (let i = 3; i >= 1; i--) { // <- decreasing loop
// if one field contains something, stop here :
if (emails[i] != '' || titles[i] != '') {
break;
}
// otherwise : call your displayInputFields
displayInputField('none', i);
}

Phone Number Validation With Spacing

I have researched all over the place for a phone number validation in JavaScript that adds spacing as they type.
The closest code I came to was
$('#ssn').keyup(function() {
var val = this.value.replace(/\D/g, '');
var newVal = '';
while (val.length > 3) {
newVal += val.substr(0, 3) + '-';
val = val.substr(3);
}
newVal += val;
this.value = newVal;
});
http://jsfiddle.net/ssthil/nY2QT/.
Expect that is American Mobile Numbers. Anyone know how to do Australia format (XXXX XXX XXX). I tried moving the digits around in the JavaScript but nothing seemed to work.

Try this code :
while (val.length > 3) {
if(newVal.length > 4){
newVal += val.substr(0, 3) + ' ';
val = val.substr(3);
} else {
newVal += val.substr(0, 4) + ' ';
val = val.substr(4);
}
}
newVal += val;
this.value = newVal;
});
Working fiddle :
http://jsfiddle.net/nY2QT/718/

Modifying your code a little bit you can get something like this:
$('#ssn').on('input', function() {
var val = this.value.replace(/\D/g, '');
if(val.length > 10) {
this.value = this.value.slice(0,12);
} else {
this.value = (val.slice(0,4) + ' ' + val.slice(4,7) + ' ' + val.slice(7,10)).trim();
}
});

I have made some changes with loop hope it will works
$('#ssn').keyup(function() {
var val = this.value.replace(/\D/g, '');
var newVal = '';
var flag = true;
while (val.length > 3) {
if(flag){
flag=false;
newVal += val.substr(0, 4) + '-';
val = val.substr(4);
} else {
newVal += val.substr(0, 3) + '-';
val = val.substr(3);
}
}
newVal += val;
if(this.value.length >= 5){
this.value = newVal;
}
});

You could have instead three <input /> elements, give them each maxlength="4", maxlength="3", and maxlength="3" respectively. And as soon as the user completes each input, they're moved to the following:
HTML
<form>
<input maxlength="4" autofocus="autofocus" name="first"/>
-
<input maxlength="3" name="second"/>
-
<input maxlength="3" name="third"/>
</form>
Javascript/jQuery
// Autofocus second after first is complete
$('[name="first"]').keyup(function() {
if ( $(this).val().length == 4) {
$('[name="second"]').focus();
}
});
// Autofocus third after second is complete
$('[name="second"]').keyup(function() {
if ( $(this).val().length == 3) {
$('[name="third"]').focus();
}
});
// Alert numer after third is complete
$('[name="third"]').keyup(function() {
if ( $(this).val().length == 3) {
alert("Number: " + $('[name="first"]').val() + "-" + $('[name="second"]').val() + "-" + $('[name="third"]').val() + ".");
}
});
Also, to valide for only numbers, you can use RegEx:
// The following code is RegEx, used to validate the inputs so that the user can only type in numbers
$('[name="first"], [name="second"], [name="third"]').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});
// Support for old browsers
$('[name="first"], [name="second"], [name="third"]').on('keyup', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});
Eureka!
Edit: answer to Z-Dog's "question":
// Autofocus first if backspace is pressed and this is empty
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '8' && $(this).val().length == 0){
$('[name="first"]').focus();
// And delete last character
$('[name="first"]').val(
function(index, value){
return value.substr(0, value.length - 1);
});
return false;
}
Eureka 2.0!

Use Jquery Mask plug-in
https://igorescobar.github.io/jQuery-Mask-Plugin/
It simple to integrate ans use

Use this code it might work
document.getElementById('ssn').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/(\d{4}) ?(\d{3}) ?(\d{3})/,
'$1 $2 $3');
});

Input removing leading 0

I have a form input field.
<input style="text-align:right;" type="text" name="DiversionCalc_Diversion_Rate" id="calc_dr" value="0.25%" />
I am attempting to format it based on focusout using jQuery 1.7.2
$('#calc_dr').focusout(function () {
var value = $.trim($(this).val()).toString();
if (value.indexOf("0.") === -1) {
var $t = ("0" + value).toString();
alert($t);
$(this).val($t);
}
if (value != '' && value.indexOf("%") === -1) {
$(this).val(value + '%');
}
});
While this mostly is working, the alert pops up the correct 0.25 when I enter .25 in the field, however, the $(this).val only ever shows .25
How can I get it to show what it's showing me in the alert???

Make $t a global variable (pull it out of the if loop) and assign it instead of value.
$('#calc_dr').focusout(function () {
var value = $.trim($(this).val()).toString();
var $t = value;
if (value.indexOf("0.") === -1) {
$t = ("0" + value).toString();
alert($t);
$(this).val($t);
}
if ($t != '' && $t.indexOf("%") === -1) {
$(this).val($t + '%');
}
});

The basic idea is to grab the value, manipulate the value, then update the UI. The key being there is only one update at the end.
// Get the new value (strip everything but numbers and period)
var v= parseFloat($(this).val().toString().replace(/[^0-9\.]+/g, ""));
// Basic data type validation
if (isNaN(v)) v= 0;
if (v< 0) v= 0;
if (v> 100) v= 100;
// other validation updates v as needed...
doCheckDiversionRate(v);
// update UI (btw toFixed() will add a leading zero)
$(this).val(v.toFixed(2) + '%');