We Keep Coding

Change input type of textbox

I am using a script for my textbox to make sure the user can enter only numbers instead of text.
Here is my textbox:
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event)" />
And here is my javascript:
function isNumber(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;
}
I want to upgrade my JavaScript. I want that the textbox accepts a input with a dot . (only 1 dot), like 11.5
What do I need to change in my script so it will be accept the dot and limit this to one?

Try this one
<input type="text" id="txtCheck" onkeypress="AllowDecimalNumbersOnly(this, event)" />
function AllowDecimalNumbersOnly(Id, Evt) {
Id.value = Id.value.replace(/[^0-9\.]/g, '');
if ((Evt.which != 46 || Id.value.indexOf('.') != -1) && (Evt.which < 48 || Evt.which > 57)) {
Evt.preventDefault();
}
}

JavaScript :
<script>
var isHav=false;
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if(charCode == 46){
if(isHav==true){
return false;
}else{
isHav=true;
return true;
}
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
HTML :
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event)" />

alternatively you can use this..
function isNumber(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /^[0-9.,]+$/;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event)" />

Follow the below code:
you need to change your function onkeypress event by adding this parameter
just like below:
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event, this)" />
and change your function as below:
function isNumber(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
(charCode > 31 && (charCode < 48 || charCode > 57)))
{
return false;
}
return true;
}
You can check below running code:
function isNumber(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
(charCode > 31 && (charCode < 48 || charCode > 57)))
{
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event, this)" />

You can use type="number" attribute if it meet with your requirement
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event)" type="number" />
Or Use This
function isNumber(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}

Validation and Backspace Conflict Firefox

I have an input field that has a validation. The validation works great in all browsers. However in Firefox there seems to be an issue. If an user presses backspace or arrow or home keys in that input field it simply does not work.
THE HTML:
<input onkeydown="return isName(event)" class="form-control firstnameweb_text" placeholder="First Name" id="firstname_text" name="firstname_text" onblur="isEmptyfname(this)" required="" type="text">
THE JS:
function isName(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
} else if (e) {
var charCode = e.which;
} else {
return true;
}
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode > 7 && charCode < 10) || (charCode == 46) || (charCode > 38 && charCode < 39) || (charCode == 32) || (charCode == 190))
return true;
else
return false;
} catch (err) {
alert(err.Description);
}};

How my JS function would restrict specific data ?

In asp.net textbox I have called a javascript function which I wrote to restrict only 'digits' entry in text box but I also want to allow '+' sign but can't solve it.
This is what I have tried so far.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}

Just reverse your condition and add the ASCII code for + which is 43 to return true
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode >=48 && charCode <= 57) || (charCode == 43))
return true;
return false;
}

If you were able to restrict digits, you can also enter '+', I guess you need ASCII table and corresponding value i.e. how you were restricting digits, and charCode > 31 seems useless if you are checking for digits only:
http://www.asciitable.com/
so if you want to check for +
charCode != 43

You need to check for + as well explicitly, modify your if to :
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 43)
Here is working example:
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 43) {
return false;
}
return true;
}
<input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" />

Working Demo
Ascii Table
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)&& charCode != 43) {
return false;
}
return true;
}

Javascript currency regular expression replace

For my business web application I want a user to only be able to enter valid currency values in a textbox.
Currently I use
$input.val($input.val().replace(/[^.\d]/g, ''));
But this doesn't take in consideration order or multiple decimal seperators.
So the user either has to enter a whole integer or a valid decimal value e.g.:
49
49.50
Bonus points if this is allowed too:
.50 (for 0.50)
So I don't want to validate, I want to restrict typing into the textbox. Is this possible with a single regexp replace?

We can do this in two steps. Restrict the user to type only the number characters and . character.
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode < 31 && (charCode > 48 || charCode < 57))
return true;
return false;
And the next one is for allowing the .:
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 46 && (charCode > 31 && (charCode < 48 || charCode > 57)))
return true;
return false;
The next step will be not allowing double periods.
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 46 && (charCode > 31 && (charCode < 48 || charCode > 57)))
if (charCode == 46 && value.indexOf(".") !== false)
return true;
return false;
Hope you can have this as a starting point.
Snippet
Open Deal: Break it if you can.
function check(inp) {
var charCode = (event.which) ? event.which : event.keyCode;
console.log(charCode);
if (charCode == 8)
return true;
if ((charCode > 46 && charCode < 58) || (charCode > 95 && charCode < 106) || charCode == 110 || charCode == 190)
if (charCode == 110 || charCode == 190)
if (inp.value.indexOf(".") == -1)
return true;
else
return false;
else
return true;
return false;
}
<input type="text" onkeydown="return check(this);" />

It's more user friendly to advise of errors and let users fix them themselves. You might consider using the keyup event, but showing an error too early (before the user has had a chance to enter a valid value) can be annoying too. e.g.
function validate(el) {
var type = el.className;
var errEl = document.getElementById(el.name + 'Err');
if (type == 'typeCurrency') {
var currencyRe = /^-?(\d+(\.\d{1,2})?|\.\d{1,2})$/;
errEl.style.visibility = currencyRe.test(el.value)? 'hidden' : 'visible';
}
}
.errorMessage {
color: red;
background-color: white;
visibility: hidden;
}
Cost <input onblur="validate(this)" name="foo" class="typeCurrency" placeholder="0.00"><br>
<span id="fooErr" class="errorMessage">Please enter a valid cost, e.g. 2.45</span>

Javascript validation works in Google Chrome but not in Firefox

Here is the js code
function isCharKey(evt){
var charCode = event.keyCode
if ((charCode > 64 && charCode <91 )|| (charCode >96 && charCode<123) || (charCode==32))
return true;
return false;
}
Here is the html code
<label id="exe_form_name">Name:</label><input type="text" name="tbcust_name" id="name1" onkeypress="return isCharKey(event);">

Change
var charCode = event.keyCode
to
var charCode = evt.keyCode

function isCharKey(evt)
{
var charCode = evt.keyCode
if ((charCode > 64 && charCode <91 )|| (charCode >96 && charCode<123) || (charCode==32))
return true;
return false;
}