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());
Related
In Firefox you can enter letters, they show in the screen but not in the js
code, about the value. I would like just restrict that the user can put in letters in the input field. Just restrict it to numbers.
https://jsfiddle.net/j5fv4htp/1/
<input step="0.1" class="number" name="SupplyAirFlow" value="" pattern=".{1,}" type="number">
document.querySelector("input.number").onkeydown = function() {
console.log("value: ", this.value);
};
If you want only numbers in the input use:
document.getElementsByClassName('number')[0].addEventListener('keydown', function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 ||
(key == 65 && ( e.ctrlKey || e.metaKey ) ) ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) ||
(key >= 96 && key <= 105)
)) e.preventDefault();
});
I have tried to append the code from another post which works perfectly on fiddle on this link: http://jsfiddle.net/WfpEu/51/
The code replaces comma "," as soon as the user types it and turns it to dot "."
$.fn.ForceNumericOnly = function() {
return this.each(function() {
$(this).keydown(function(e) {
if(e.keyCode==188 || e.keyCode==110 || e.keyCode==108){
e.preventDefault();
$(this).val($(this).val() + '.');
}
var key = e.charCode || e.keyCode || 0;
return (key == 8 || key == 9 || key == 46 || key == 110 || key == 188 || key == 190 || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
});
});
};
$(".item").ForceNumericOnly();
I have tried to append it to my code here http://jsfiddle.net/p2Hbm/104/ and it doesn't work as it should and i don't know what is wrong. I can't write letters in input fields which is good but also i can't write comma "," it doesn't show up at all.
You need to add the itemclass to your input fields.
Working fiddle: http://jsfiddle.net/p2Hbm/106/
A long time ago if found some code (on this site) that stopped the user from entering Letters into a text box, and it worked. Since finding this code I have changed it and added and now it doesn't work. This is what code I have:
var count = 1
function isNumberKey(event) {
var keyCode = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 // backspace
|| event.keyCode === 46 // delete
|| event.keyCode === 13 // enter key
|| event.keyCode === 9 // tab
|| event.keyCode === 116 // F5 (refresh)
|| event.keyCode === 112 // F1
|| event.keyCode === 113 //F2
|| event.keyCode === 114 //F3
|| event.keyCode === 115 //F4
|| event.keyCode === 117 //F6
|| event.keyCode === 118 //F7
|| event.keyCode === 119 //F8
|| event.keyCode === 120 //F9
|| event.keyCode === 121 //F10
|| event.keyCode === 122 //F11
|| event.keyCode === 123 //F12
) {
return true;
}
else if ( key < 48 || key > 57) {
if (count < 6) {
count++; //adds one to count
}
else {
alert("Please Only Enter Numerical Values");
count = 1;
}
return false;
}
else return true;
}
I'm not claiming I made/wrote this code but can anyone see any problems with the code?
This will work. It was not working because you use key < 48 || key > 57 instead event.keyCode < 48 || event.keyCode > 57
var count = 1
function isNumberKey(event) {
var keyCode = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 // backspace
|| event.keyCode === 46 // delete
|| event.keyCode === 13 // enter key
|| event.keyCode === 9 // tab
|| event.keyCode === 116 // F5 (refresh)
|| event.keyCode === 112 // F1
|| event.keyCode === 113 //F2
|| event.keyCode === 114 //F3
|| event.keyCode === 115 //F4
|| event.keyCode === 117 //F6
|| event.keyCode === 118 //F7
|| event.keyCode === 119 //F8
|| event.keyCode === 120 //F9
|| event.keyCode === 121 //F10
|| event.keyCode === 122 //F11
|| event.keyCode === 123 //F12
) {
return true;
}
else if ( event.keyCode < 48 || event.keyCode > 57) {
if (count < 6) {
count++; //adds one to count
}
else {
alert("Please Only Enter Numerical Values");
count = 1;
}
return false;
}
else return true;
}
this should do it:
textBox.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
var charStr = String.fromCharCode(charCode);
if (/\d/.test(charStr)) {
return false;
}
};
This came up when I was asking, so it might be worth adding here that keyCode and charCode is deprecated, as at this time, so the accepted answer might not be the best.
A better way of adding the check or implementing the isNumberKey function could be:
const isNumberKey = (event: KeyboardEvent) =>
((event.key.length > 1) || event.key.match(/^\d|-$/))
This way, we check allow special keys do their function, while making sure only numbers are allowed when single character keys are pressed.
I found this very short clean code to only allow numeric chars in a text field. Currently it only covers numbers 0-9 and backspace and delete. I wanted it to also include decimal/period, so I have been fighting with this to simply include keycode 110 and/or 190. I can not get it to work. Can anyone see what I am doing wrong?
$(document).ready(function() {
$('input.numberinput').bind('keypress', function(e) {
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57) ) || (e.which!=110) ? false : true ;
});
});
jsfiddle here: http://jsfiddle.net/justmelat/EN8pT/
html
<div class="label">Enter a number:</div>
<input type="text" name="txtNumber1" id="txtNumber1" value="" class="numberinput" />
<div class="label">Enter a number:</div>
<input type="text" name="txtNumber2" id="txtNumber2" value="" class="numberinput" />
</div>
Try:
$(document).ready(function () {
$('input.numberinput').bind('keypress', function (e) {
return !(e.which != 8 && e.which != 0 &&
(e.which < 48 || e.which > 57) && e.which != 46);
});
});
JsFiddle: http://jsfiddle.net/EN8pT/1/
With the above answer you can still do 0.23.12.33 which is not a valid number.
http://www.texotela.co.uk/code/jquery/numeric/ is a great little lightweight plugin that I have used a lot. It takes the pain out of the above.
$("#input").keydown(function(event) {
var theEvent = event || window.event;
var key = theEvent.keyCode || theEvent.which;
// Allow: backspace, delete, tab, escape, and enter
if ( key == 46 || key == 8 || key == 9 || key == 27 || key == 13 || key == 110 || key == 190 ||
// Allow: Ctrl+A
(key == 65 && theEvent.ctrlKey === true) ||
// Allow: home, end, left, right
(key >= 35 && key <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (theEvent.shiftKey || (key < 48 || key > 57) && (key < 96 || key > 105 )) {
theEvent.preventDefault();
}
}
});
with keycode 110 and 190
I found the following jQuery code on the internet, but I soon found that it had a deficiency in that it dit not accept a decimal point (ascii code 46) - even though the code appears to allow it.
Currently, I cannot enter prices like 1.23, since the the period is ignored and I get 123 instead.
Can anyone spot whty this is not working?
// Numeric only control handler
$.fn.ForceNumericOnly =
function()
{
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
return (
key == 8 ||
key == 9 ||
key == 46 ||
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
})
})
};
I am using the plugin like this:
$(function(){
$('#price_field').ForceNumericOnly();
});
The other users have pretty much answered your question already, but I wanted to provide you with this link.
http://unixpapa.com/js/key.html
I found it quite useful when dealing with keyboard events and making them cross-browser compatible.
I hope this helps.
Just add the . (code 190 and 110) to the checks:
// Numeric only control handler
$.fn.ForceNumericOnly =
function()
{
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
return (
key == 8 ||
key == 9 ||
key == 46 ||
key == 190 || // normal .
key == 110 || // keypad .
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
})
})
};
You should add the key code 190 to accept "."
// Numeric only control handler
$.fn.ForceNumericOnly = function() {
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow dot, backspace, tab, delete, arrows, numbers and keypad numbers ONLY
return (
key == 190 ||
key == 8 ||
key == 9 ||
key == 46 ||
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
})
})
};
You need to include 190 and 110 for both decimal points.
// Numeric only control handler
$.fn.ForceNumericOnly =
function()
{
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
return (
key == 190 || //add this line. 190 is the keycode for a period
key == 110 || //and this line. 110 is the keycode for a decimal
key == 8 ||
key == 9 ||
key == 46 ||
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
})
})
};