We Keep Coding

How to automatically add space between digits as they are being entered into a textbox?

We have pin numbers in the following format:
45 674 25 910
Our original requirement was to give the users the ability to enter their pin with or without spaces,
In other words, if the pin is 10 digits without spaces, we would like to accept it as valid input.
Similarly, if the pin is 13 digits (with the three spaces) we would also like to accept the input as valid.
If the digits are less than 10 with or without spaces, or more than 13 with spaces, we would like to throw an error that input is invalid.
The script below satisfied the above requirements:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSearch").click(function () {
var result = true;
if ($('#pin').val().replace(/ /g, '').length == 10) {
result = true;
}
else {
result = false;
alert("Invalid");
return false;
}
return result;
});
});
</script>
However, management has decided to change the requirement to ask that spaces be automatically added while the user is entering the pin numbers.
In other words, users can enter the pin numbers with spaces or they can enter the pin numbers without spaces but that spaces be automatically added while they are typing the pin numbers.
Any ideas how to modify the script above?
Better yet, is there an example that I can modify to meet our requirements?

Using String.prototype.replace()
Note: this code will add space after 2, 3, 2, 3 ..etc chars. you can change the number of chars by edit the code inside map
$("#user-input").on('keyup', function () {
// Helpers
var swap = 4, // Swap between 3 and 4
index = 2; // Spaces indexs 2, 6, 9, 13 .. etc
// This variable contains the same input value with sapces
var niceVal = $(this).val()
.replace("/\s/g", "").split("") // Remove all spaces and convert to array
.map(function (item, i) { // loop throw the array
if (i === 0) {
return item;
}
if (i % index === 0) {
item = item === " "
? item
: " " + item;
index += swap;
swap = swap === 3
? 4
: 3;
}
return item;
}).join(""); // Convert array to string
$(this).val(niceVal); // Update input value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="user-input">

Well with pure JS my approach to the problem could be as follows;
Though i mentioned the keyup event in my comment, it seems the keydown event turns out to be more appropriate since keyup might result a strange behavior when multiple keys are pressed at the same time due to speed typing. I haven't tested this thoroughly so it's just a guidance for you. However, if you discover any buggers i can possibly have a look into it.
Edit: Despite all my efforts I have come to the awareness of the fact that if you want to modify the value of an input element, like in this question, you must set up a logic to utilize both keydown and keyup events in a harmony. This will simplify your logic enormously and would yield a much sturdy code.
OK lets go...
var pin = document.getElementById("PIN"),
pbt = document.getElementById("PBT");
pin.addEventListener("keydown", function(e){
var val = e.target.value,
len = val.length,
lst = val[len-1],
key = e.key;
e.target.value = key === "Backspace" ? len === 4 ||
len === 8 ||
len === 11 ? val.slice(0,-1)
: val
: len === 2 ||
len === 6 ||
len === 9 ? val + "\xa0"
: val;
});
pin.addEventListener("keyup", function(e){
var val = e.target.value,
pix = val.search(/[^0-9\xa0]/); // problem index
e.target.value = ~pix ? val.slice(0, pix) : val
});
pbt.addEventListener("click", function(e){
pin.value.length === 13 ? console.log(pin.value)
: console.log("Please complete the PIN Code");
});
<input id="PIN" value="" placeholder="Enter PIN" maxlength=13 size=13/>
<button id="PBT">Enter PIN</button>

jQuery regex can match numbers, but not hyphens

So, I would like to limit an input field to only allow numbers and hyphens. I'm not interested in changing my methodology, but would like to understand why my regex matches numbers but not hyphens.
Regex:
/[^0-9-]/g
jsFiddle: http://jsfiddle.net/abriggs/7G6JD/

Problem was with keycode of - ,
keycode of - is 189 or 109 .
But
String.fromCharCode(189) is ½
String.fromCharCode(109) is m
You can use the following code :
function numbersOnly(number, allowDash) {
// Filter non-digits/dash from input value.
console.log(number);
if (allowDash) {
number = number.replace(/[^0-9\-]/g, '');
} else {
// Filter non-digits from input value.
number = number.replace(/\D/, '');
}
return number;
}
$(function(){
// Do not allow non-numeric characters in bill zip code
$('#billZip').keydown(function(e) {
console.log(e.keyCode);
if (e.keyCode != 8 && e.keyCode != 37 && e.keyCode != 39) {
if(e.keyCode ===189||e.keyCode ===109)
if (numbersOnly(String.fromCharCode(45), true) != "")
return true;
else
return false
if (numbersOnly(String.fromCharCode(e.which), true) != "")
return true;
else return false
}
});
});
Fiddle

Adding simple console lines will show the error
function numbersOnly(number, allowDash) {
console.log("In numbersOnly);
// Filter non-digits/dash from input value.
if (allowDash) {
console.log("1:", number);
number = number.replace(/[^0-9\-]/g, '');
console.log(2:", number);
} else {
// Filter non-digits from input value.
number = number.replace(/\D/, '');
}
return number;
}
Type in 1
In numbersOnly
1: 1
2: 1
Type in -
In numbersOnly
1: ½
2:
So your problem is with the line String.fromCharCode(e.which)

The only way to do this is to have the hyphen as the FIRST or LAST character within the character class such as this:
[-0-9] or [0-9-]
However, you are using a "^" which negates everything in the character class, so if you only want hyphens and numbers you should not have the caret.
Source: http://www.regular-expressions.info/charclass.html

Allowing user to click only one "."

I am trying to implement a simple javascript-html calculator. What i want to do is,typing only one '.' by the user. How can i control this ? Here is the code that i tried.
I can already find the number of '.' but i'am confused now also this replaceAll function is not replacing '.' with empty string.
String.prototype.replaceAll = function(search, replace)
{
//if replace is null, return original string otherwise it will
//replace search string with 'undefined'.
if(!replace)
return this;
return this.replace(new RegExp('[' + search + ']', 'g'), replace);
};
function calculate(){
var value = document.calculator.text.value;
var valueArray = value.split("");
var arrayLenght = valueArray.length;
var character = ".";
var charCount = 0;
for(i=0;i<arrayLenght;i++){
if (valueArray[i]===character) {
charCount += 1;
}
}
if(charCount>1){
var newValue=value.replaceAll(".","");
alert(newValue);
}
}

I recently accomplished this with the following code. This sat in a function that was triggered for each keypress on the field. It might be a bit messy and I'm sure there's a better way, but it works. It also allows someone to enter a "." if they have one selected, since it would replace that selected one:
// Function to verify number
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
// Function called (below) to get text if it is selected
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
// jQuery function on keypress for the textbox
$(".textbox").on("keypress", function (e) {
var fieldVal = $(this).val();
if (e.keyCode == 9) return true; // tab
var keyPressed = String.fromCharCode(e.keyCode);
if (keyPressed == "." && ((fieldVal.indexOf(".") == -1) || getSelectionText().indexOf(".") > 0)) return true; // decimal places, only allow one
return (isNumber(keyPressed));
});
EDIT: I should mention, the isNumber() function also checks to verify that the end result is a number. I can post that if you'd like also.
EDIT 2: Modified code block to add the isNumber() function.

Your (main) problem is this test :
if(!replace)
When replace is "", !"" is true.
Change the test to
if (replace==null)
(it works for both undefined and null)
But I don't really see why you need to define a replaceAll function when you seem to want
var newValue=value.replace(/\./g,"");
EDIT : If what you want is to replace all dots apart the first one you can do
var i=0, newValue=value.replace(/\./g, function(){ return i++ ? "," : "." });
(you don't need to count before that, and i will be the count of dots)

Allow only 2 decimal points entry to a textbox using javascript or jquery?

I called a class called test for my textbox. When I entered the first value for e.g. the first value as 4., then suddenly the output coming as 4.00. I just want to restrict entry only for two decimal places.
$(".test").keyup(function (event) {
debugger;
this.value = parseFloat(this.value).toFixed(2);
});

This small change to your code may suffice:
this.value = this.value.replace (/(\.\d\d)\d+|([\d.]*)[^\d.]/, '$1$2');
Essentially replace the decimal point followed by any number of digits by a decimal point and the first two digits only. Or if a non digit is entered removes it.

What about something like this:
$(".test").keyup(function (event) {
if ((pointPos = this.value.indexOf('.')) >= 0)
$(this).attr("maxLength", pointPos+3);
else
$(this).removeAttr("maxLength");
});
Here is a working fiddle.

you can use the maxLength attribute for that, try
$(".test").keyup(function (event) {
var last = $(this).val()[$(this).val().length - 1];
if (last == '.') {
$(".test").attr("maxlength", $(this).val().length+2);
}
});

You shouldn't worry about what the user has in the input until they submit the form. You really don't care what's in there before then. However, if you want to warn about invalid input, you can put a message on the screen if you detect non–conforming input, e.g.
<script>
function validate(element) {
var re = /^\s*\d*\.?\d{0,2}\s*$/;
var errMsg = "Number must have a maximum of 2 decimal places";
var errNode = document.getElementById(element.name + '-error')
if (errNode) {
errNode.innerHTML = re.test(element.value)? '' : errMsg;
}
}
</script>
You should probably also put a listener on the change handler too to account for values that get there by other means.

$(document).on("keyup", ".ctc", function ()
{
if (!this.value.match(/^\s*\d*\.?\d{0,2}\s*$/) && this.value != "") {
this.value = "";
this.focus();
alert("Please Enter only alphabets in text");
}
});

How to detect that a space was backspaced or deleted

I need to find a way to detect if a space was deleted or backspaced, and run a function if that is the case. I am working on this in JavaScript / jQuery.
I know I can get the delete or backspace key press by using:
$(this).keyup(function(event) {
event.keyCode
However, I do not know how to tell if the delete or backspace command removed a space?
Very appreciative for any suggestions.

See here: http://jsfiddle.net/Txseh/
(function(){
var currentWhitespaceCount;
$("input").keyup(function(e){
var newCount = ($(this).val().match(/\s/g) || []).length;
if (newCount < currentWhitespaceCount)
alert("You removed one or more spaces, fool.");
currentWhitespaceCount = newCount;
});
})();​
It tracks the current number of whitespace characters in the input, and if ever the number goes down, it alerts(or does whatever you want).

Cache the value beforehand (set a value on keypress) and compare with the value after keypress. That is the only way to know with certainty that one or more spaces has been removed. Any checking of keys relies on you being able to work out what possible keys could achieve the removal of a space, and will likely leave holes.
As an example, selecting the final letter of a word and the space following it, if we press the last letter it will remove the space. But the key pressed is not backspace or delete.

Bind to the keydown and compare the value from before and after to see if it reduced in size.
$(input).keydown(function(){
var currVal = this.value, self = this;
setTimeout(function(){
if ( currVal.length > self.value.length ) {
console.log(currVal.length - self.value.length + " characters have been removed.");
}
},0);
});
http://jsfiddle.net/ymhjA/1/
Updated sample:
$("input").keydown(function() {
var currVal = this.value,
self = this;
setTimeout(function() {
if (currVal.length - self.value.length === 1) {
var origVal = $.grep(currVal.split(""),function(val){
return val === " ";
});
var newVal = $.grep(self.value.split(""),function(val){
return val === " ";
});
if ( origVal.length != newVal.length ) {
console.log("a space was removed");
}
}
}, 0);
});​
http://jsfiddle.net/ymhjA/4/

actually here is my code http://jsbin.com/atuwez/3/edit
var input = $('#input'),
afterLength,
beforeLength;
input.on({
'keydown': function () {
beforeLength = input.val().split(/\s/).length;
},
'keyup': function(event) {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 ) {
afterLength = input.val().split(/\s/).length;
console.log(beforeLength == afterLength);
}
}
});