We Keep Coding

jQuery to only accept values between 1 and 100 in contenteditable element

How can I go about only allowing values between 1 and 100 in my HTML table td cells,
Currently, I have a jquery function only allowing numbers,
//only allow numbers in td
$(".allow_only_numbers").keydown(function (e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode >= 35 && e.keyCode <= 40)) {
return;
}
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
However, I only want values ranging from 1-100
The td is content editable and cells I only want to contain such values have a class called allow_only_numbers e.g
<td contenteditable='true' class="allow_only_numbers">-</td>

I would do something like this
$(".allow_only_numbers").keydown(function (e) {
if($(".allow_only_numbers").innerText < 100 && $(".allow_only_numbers").innerText >= 1 ) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode >= 35 && e.keyCode <= 40)) {
return;
}
else if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
} else alert('number out of range')
});

Return `false` when press and `true` when press

I have a button and when it is clicked it needs to disable the keyCodes 49,50,51,52,53,54.
And when I click keyCode 27 it needs to return true for all the keyCodes.
button_size_1.onclick = function() {
$("html").bind("keydown", function(e) {
if (
e.keyCode == 49 ||
e.keyCode == 50 ||
e.keyCode == 51 ||
e.keyCode == 52 ||
e.keyCode == 53 ||
e.keyCode == 54
) {
return false;
console.log("false");
} else if (e.keyCode == 27) {
return true;
console.log("true");
}
});
};

You're writing console.log() AFTER the return, which will never work as it doesn't read any code that comes afterwards. You need to put the console.log() first :
if (e.keyCode == 49 || e.keyCode == 50 || e.keyCode == 51 || e.keyCode == 52 || e.keyCode == 53 || e.keyCode == 54) {
console.log("false");
return false;
} else if (e.keyCode == 27) {
console.log("true");
return true;
}
So it does return true, it just didn't show you anything in the console cuz of this simple problem :-)

You'll need a variable which tells if keyCode 27 has been pressed or not. Take a look at the example below. The keyCode27Pressed value resets every time the button gets clicked. It will be changed to true once the key with keyCode 27 has been pressed and after that it will return true for all defined keys pressed.
button_size_1.onclick = function() {
let keyCode27Pressed = false;
$("html").bind("keydown", function(e) {
if (
e.keyCode == 49 ||
e.keyCode == 50 ||
e.keyCode == 51 ||
e.keyCode == 52 ||
e.keyCode == 53 ||
e.keyCode == 54
) {
if (!keyCode27Pressed) {
console.log("false");
return false;
} else {
console.log("true");
return true;
}
} else if (e.keyCode == 27) {
keyCode27Pressed = true;
console.log("true");
return true;
}
});
};

allow tab and other keys in input textbox

Below is my javascript code which restrict the user for following:
1) only allow numeric and upto two decimal points.
It also restrict the user for tab, backspace , delete, left and right arrow keys.
I tried by adding condition event.which != 8/9/37/38 but not succeed.
Below is the code:
$('#txtprice').keypress(function (event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
event.preventDefault();
}
});
can any one please correct me here.
EDITED: Modified as below but not work.
$('#txtprice').keypress(function (event) {
if (event.which == 8 || event.which == 9 || event.which == 37 || event.which == 38) {
event.preventDefault();
return;
}
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
event.preventDefault();
}
});
Thanks

You simply just have to allow what you want, not determine what you don't want. This is easy by determining if the keyCode is a period (190) or in between 48 and 57.
function validateNum(e) {
var elem = document.getElementById("txtprice");
if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 190) {
var txt = elem.value;
if (e.keyCode == 190 && txt.match(new RegExp('\\.','g')).length > 1) {
e.preventDefault();
}
} else {
e.preventDefault();
}
}
Here is a working js fiddle: http://jsfiddle.net/e72uqvbv/
UPDATE: I miss understood the period situation request, I have updated my answer.

jQuery only digits in input

I want only numbers in my input. I can't change type of input to "number". So I have this code.
Number : <input type="text" name="quantity" id="quantity" />
<script>
$(document).ready(function() {
$("#quantity").off("keyup").on("keyup", function(e) {
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
});
});
And it's not works but if i change selector to $("#quantity").off("keyup").on("keyup", function(e) { It works. I haven't change the first selector

try like this,
function isNumber(n){
return (parseFloat(n) == n);
}
$("document").ready(function(){
$("input").keyup(function(event){
var input = $(this).val();
if(!isNumber(input)){
$(this).val(input.substring(0, input .length-1));
}
});
});
Demo

Firefox keydown backspace issue

I'm building a terminal emulation and running into an issue with capturing backspace in Firefox. I'm able to nab the first backspace and remove the last character on the input at the prompt, but it won't persist and remove more than one character.
Actual website: http://term.qt.io/
Replication here: http://jsfiddle.net/BgtsE/1/
JavaScript code
function handleKeys(e){
var evt = e || window.event;
var key = evt.charCode || evt.keyCode;
if(evt.type == "keydown")
{
curr_key = key;
if(key == 8)
{
evt.preventDefault();
if(0 < $('body').text().length)
$('body').text($('body').text().slice(0,-1));
}
}
else if(evt.type == "keypress")
{
if(97 <= key && key <= 122)
{
if(curr_key != key)
$('body').append(String.fromCharCode(key));
}
else
$('body').append(String.fromCharCode(key));
}
}
$(function(){
$('html').live({
keydown:function(e){
handleKeys(e);
},
keypress:function(e){
handleKeys(e);
}
})
})​

Try this: http://jsfiddle.net/NBZG8/1/
You'll need to handle backspace in both keydown and keypress to support Chrome and Firefox
function handleKeys(e){
var evt = e || window.event;
var key = evt.charCode || evt.keyCode;
if (evt.type == "keydown") {
curr_key = key;
if(key == 8 && !$.browser.mozilla) {
backspaceHandler(evt);
}
} else if (evt.type == "keypress") {
if (key == 8) {
backspaceHandler(evt);
} else if (97 <= key && key <= 122) {
if(curr_key != key) {
$('body').append(String.fromCharCode(key));
}
} else {
$('body').append(String.fromCharCode(key));
}
}
}
function backspaceHandler(evt) {
evt.preventDefault();
if(0 < $('body').text().length) {
$('body').text($('body').text().slice(0,-1));
}
};
$(function(){
$('html').live({
keydown : handleKeys,
keypress : handleKeys
})
})​

In firefox Windows 17.0.1 any value returned by $("selector").text() has an added new line character appended to the end. So the substring didn't work for me:
<html>
<head>
<title>test</title>
<script src="jquery.js"></script>
<script>
$("document").ready(function(){
console.log("body text seems to have a new line character");
console.log(($('body').text()[5]=="\n"));
});
function handleKeys(e){
var evt = e || window.event;
var key = evt.charCode || evt.keyCode;
if(evt.type == "keydown")
{
curr_key = key;
if(key == 8)
{
evt.preventDefault();
if(0 < $('body').text().length)
// next line works, you might trim the \n if it's there at the end
//$('body').text($('body').text().slice(0,-2));
// this one didn't work for me
$('body').text($('body').text().substring(0,$('body').text().length-1));
}
}
else if(evt.type == "keypress")
{
if(97 <= key && key <= 122)
{
if(curr_key != key)
$('body').append(String.fromCharCode(key));
}
else
$('body').append(String.fromCharCode(key));
}
}
$(function(){
$('html').live({
keydown:function(e){
handleKeys(e);
},
keypress:function(e){
handleKeys(e);
}
})
})
</script>
</head>
<body>12345</body>
</html>

I had the same issue with keypress on mozilla.
Thanks to this subject it solves my problem so I'll post my code if anyone try to do the same thing as me.
In my exemple I try to auto space when the user type two numbers, and it didn't work in Firefox so that's my code :
$(function() {
$('#field1, #field2').on('keypress',function(event) {
event = event || window.event;
var charCode = event.keyCode || event.which,
lgstring = $(this).val().length,
trimstring;
if(charCode === 8) {
event.returnValue = false;
if(event.preventDefault)
event.preventDefault();
if(0 < $(this).val().length) {
$(this).val($(this).val().slice(0,-1));
}
}
else if(((charCode > 31) && (charCode < 48 || charCode > 57)) || lgstring >= 14) {
event.returnValue = false;
if(event.preventDefault)
event.preventDefault();
}
else {
trimstring = $(this).val().replace(/ /g,"");
if((lgstring !== 0) && (trimstring.length % 2) === 0 ) {
$(this).val($(this).val() + ' ');
}
}
});
});
I noticed that Mozilla handle the backspace as a keypress where Chrome don't.
Sorry for my English I'm French

$('#id').keypress(function(e) {
if(e.charCode > 0 || e.keyCode === 8){
if(e.keyCode === 8){
return true;
}else if((e.charCode !== 0) && ((e.charCode > 57 && e.charCode < 65)){
return false;
}
}else if((e.keyCode !== 0) && ((e.keyCode > 57 && e.keyCode < 65)){
return false;
}
});