Textbox to accept decimal and negative as well as backspace using Jquery - javascript

I am trying to restrict text box to accepts only decimals,integers and also - (negative sign) as well as backspace I tried with below script but its not allowing - sign
$(document).ready(function() {
$('#MainContent_txtAmount').keypress(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) &&
((event.which < 48 || event.which > 57) &&
(event.which != 0 && event.which != 8))) {
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) &&
(text.substring(text.indexOf('.')).length > 2) &&
(event.which != 0 && event.which != 8) &&
($(this)[0].selectionStart >= text.length - 2)) {
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="MainContent_txtAmount" type="text" />
How can I accepts negative numbers too.

This allows the "-" sign too. Added && event.which != 45 . DEMO FIDDLE
$(document).ready(function () {
$('#MainContent_txtAmount').keypress(function (event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) &&
((event.which < 48 || event.which > 57) &&
(event.which != 0 && event.which != 8)) && event.which != 45) {
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) &&
(text.substring(text.indexOf('.')).length > 2) &&
(event.which != 0 && event.which != 8) &&
($(this)[0].selectionStart >= text.length - 2)) {
event.preventDefault();
}
});
});

Find the attached fiddle
sql fiddle demo
"-" has a charCode of 45.
change your condition event.which < 48 || event.which > 57 to
event.which != 45 && (event.which < 48 || event.which > 57)

Related

how to restrict zero at position 0

$('input#abc').keypress(function(e){
if (this.value.length == 0 && e.which == 48 || this.value.length == 0 && e.which == 46 ){
//console.log(JSON.stringify(this.value.length[0]);
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="text" id="abc" />
In the above snippet, zero and dot can't be entered when the length ==0. In this scenario it is working.
But when we type other than zero and dot, return to the first position, and enter zero or dot it is accepted.
I want to disallow zero and dot at any time as the first character.
That is because you are checking the condition only when your textarea length is zero. Instead, check for the textarea cursor position. If it is at zero and user enters invalid character, return false. Basically, replace your if condition from
if (this.value.length == 0 && e.which == 48 || this.value.length == 0 && e.which == 46 )
to
if (this.selectionStart == 0 && e.which == 48 || this.selectionStart == 0 && e.which == 46 )
and if you want it to be more concise, you can do something (as recommended by #0x90) like
if (this.selectionStart == 0 && (e.which == 48 || e.which == 46 ))
You can check selectionStart to see cursor position
$('input#abc').keypress(function(e){
if (e.currentTarget.selectionStart === 0){
if(e.which == 48 || e.which == 46 ) {
return false;
}
}
});
https://caniuse.com/#search=selectionStart

JavaScript keycodes are not working in Firefox

I am using JavaScript keycodes, they are not working in Firefox but working in Chrome and IE. I have debugged the code in front end for Firefox I am getting keycode as 0.
This is my code:
$scope.Validate = function(event,indexVal){
if ((event.keyCode > 64 && event.keyCode < 91)|| (event.keyCode > 159 && event.keyCode < 166) || (event.keyCode > 96 && event.keyCode < 123) || (event.keyCode == 165) ||(event.keyCode == 32)
|| (event.keyCode == 164) || (event.keyCode == 130) || (event.keyCode == 181) || (event.keyCode == 144) || (event.keyCode == 214) ||
(event.keyCode == 224) ||(event.keyCode == 233)) {
}else{
event.preventDefault();
}
}
Can you please suggest a way to achieve this functionality in Firefox too.
In Firefox, event.keyCode does not always work, depending on the binding event. You'll have to use event.which. Refer to this post for more info.
$scope.Validate = function(event,indexVal) {
var key = event.keyCode || event.which;
if ((key > 64 && key < 91) ||
(key > 159 && key < 166) ||
(key > 96 && key < 123) ||
(key == 165) ||
(key == 32) ||
(key == 37) ||
(key == 39) ||
(key == 164) ||
(key == 130) ||
(key == 181) ||
(key == 144) ||
(key == 214) ||
(key == 224) ||
(key == 233)
) {
// Do something.
} else {
event.preventDefault();
}
}
It's working but slightly different
$scope.Validate = function (event, indexVal) {
var code = event.which || event.keyCode;
if (!(
(code > 64 && code < 91)
|| (code > 159 && code < 166)
|| (code > 96 && code < 123)
|| ~[165, 32, 164, 130, 181, 144, 214, 224, 233].indexOf(code)
)) {
event.preventDefault();
}
}
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
Deprecated KeyboardEvent.keyCode
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

CheckNumeric value in JavaScript

I have this function for checking text box value for entering only integer values.
function CheckNumeric(e) {
if (window.event) // IE
{
if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) {
event.returnValue = false;
return false;
}
}
else { // Fire Fox
if ((e.which < 48 || e.which > 57) & e.which != 8) {
e.preventDefault();
return false;
}
}
}
In this function textbox can accept 0 for value and reject any character.
Now I want to change this function to reject 0 if it is entered as the first character.
For example reject this: 010 and accept this: 10
you need to check if (e.keyCode == 48 && input.value.length == 0) then return false;
input is your text box element.
something like this
if (window.event) // IE
{
if (((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) || (e.keyCode == 48 && input.value.length == 0)) {
event.returnValue = false;
return false;
}
}
and it should be
(e.keyCode < 48 || e.keyCode > 57) && e.keyCode != 8)
instead of
(e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8)

event.keycode issue

i have a javascript code like below,
if (event.keycode != 37 && event.keycode != 39)
{
var phoneNumber = $('#phoneNumber').val();
if (phoneNumber.length < 1 && event.keyCode != 48)
$('#phoneNumber').val(0)
else if ((phoneNumber.length < 2 && event.keyCode == 48) )
event.preventDefault();
else
$('#phoneNumber').val(phoneNumber)
}
keycode 37 = left arrow, keycode 39 = right arrow but when i pressed these keys on keyboard condition which is between if block being executed, i am using chrome browser, also i used the if statement below,
if (event.keycode != 37 || event.keycode != 39)
{
var phoneNumber = $('#phoneNumber').val();
if (phoneNumber.length < 1 && event.keyCode != 48)
$('#phoneNumber').val(0)
else if ((phoneNumber.length < 2 && event.keyCode == 48) )
event.preventDefault();
else
$('#phoneNumber').val(phoneNumber)
}
urgent helps greatly appreciated,
Thanks everybody.
One issue is capitalization: it's keyCode, not keycode. Your code is using them inconsistently.

focus at the end of the text in a textbox

i have a requirement: a text box can have a max of 50 characters, to achieve this I gave preventDefault.
if (!(event.ctrlKey && (event.which == 65 || event.which == 86 || event.which == 67 || event.which == 88))
&& (!(event.shiftKey && (event.which == 35 || event.which == 36)))
&& (key != 8 && key != 37 && key != 39 && key != 46 && key != 36 && key != 35 && key != 33 && key != 34)) {
event.preventDefault();
}
But now the requirement is : when we press ctrl+a and then abc it should erace everything from the text and print abc.
to achieve this i wrote this code ->
var focusItem = $('<input type="text">');
function getSelText() {
var txt = '';
//IE
var focusItem = $('<input type="text">');
if (document.selection != undefined) {
focusItem.focus();
var sel = document.selection.createRange();
var rangeParent = sel.parentElement();
txt = sel.text;
if (!(event.ctrlKey && (event.which == 65 || event.which == 86 || event.which == 67 || event.which == 88))
&& (!(event.shiftKey && (event.which == 35 || event.which == 36)))
&& (key != 8 && key != 37 && key != 39 && key != 46 && key != 36 && key != 35 && key != 33 && key != 34)) {
//event.preventDefault();
if (txt.length > 0 && ((key >= 65 && key <= 90) || (key >= 48 && key <= 57) || (key >= 97 && key <= 122))) {
sel.text = String.fromCharCode(key).toLowerCase();
}
txt = sel.text;
}
}
return txt;
}
now things are working but.. when I press ctrl+a abc then its getting printed as bca. Whats happening is : When i press a after ctrl+a then a is getting printed on the textbox but the focus is getting set before the text, that is a.
How to deal with this.
I am using windows 7, IE9, visual studio 2010.
Thanks.
The easiest way to set the focus to the end of a textbox is to just set the text of the textbox to itself:
focusItem.val(focusItem.val());

Categories

Resources