Jquery increase/decrease number in input text by up/down arrows keyboard - javascript

I have a basic quantity field and would like to allow the user to increase/decrease the number within this input box based on the keyboard up/down.
Following on from: EndangeredMassa answer on keyboard code https://stackoverflow.com/a/375426/560287 how would I add this into a keyup function?
var keynum = 0;
if(window.event) { keynum = e.keyCode; } // IE (sucks)
else if(e.which) { keynum = e.which; } // Netscape/Firefox/Opera
if(keynum == 38) { // up
//Move selection up
}
if(keynum == 27) { // down
//Move selection down
}

//cache our input since we will be working with it each time an arrow key is pressed
var $input = $('input');
//bind the the `keydown` event for the `document` object which will catch all `keydown` events that bubble up the DOM
$(document).on('keydown', function (event) {
//up-arrow (regular and num-pad)
if (event.which == 38 || event.which == 104) {
//make sure to use `parseInt()` so you can numerically add to the value rather than concocting a longer string
$input.val((parseInt($input.val()) + 1));
//down-arrow (regular and num-pad)
} else if (event.which == 40 || event.which == 98) {
$input.val((parseInt($input.val()) - 1));
}
});
Here is a demo: http://jsfiddle.net/QRNP8/1/
Note that jQuery normalizes the charCode/keyCode properties into event.which:
Query normalizes the following properties for cross-browser
consistency:
target
relatedTarget
pageX
pageY
which
metaKey
Source: http://api.jquery.com/category/events/event-object/

Setting your input type to number will work as well. Though this won't work too great in IE9 and below.
<input type="number">
Source: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

There's a small jQuery plugin for doing this: https://github.com/nakupanda/number-updown
Usages:
$('#textInput').updown();
View live demo here: http://jsfiddle.net/XCtaH/embedded/result/
Keyboard and mousewheel events supported

$("input").keypress(function(event) {
var val=$(this).val();
if ( event.keyCode== 38) {
val++
$(this).val(val)
}
if ( event.keyCode== 40) {
val--
$(this).val(val)
};
});

You could do:
<input type="text" id="yourinput" value="0">
$(document).on("keypress", '*', function(e) {
if (e.keyCode == 38) { // up
$('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1);
}
if (e.keyCode == 40) { // down
$('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1);
}
});
fiddle here http://jsfiddle.net/mSCBL/1/

$("something").keyup(function(e){
var keynum = 0;
if(window.event) { keynum = e.keyCode; } // IE (sucks)
else if(e.which) { keynum = e.which; } // Netscape/Firefox/Opera
if(keynum == 38) { // up
//Move selection up
}
if(keynum == 27) { // down
//Move selection down
}
});
Where something is a selector which matches your input(s).

Your codes looks correct-ish. If your just wondering how to bind the code to the event...
$('#itemId').keyup(function(e){
/*YOUR CODE*/
});

This should work
if(keynum == 38) { // up
this.value = parseInt(this.value)-1;
}
if(keynum == 27) { // down
this.value = parseInt(this.value)+1;
}

Related

Tabs default action is not stopped event though i use e.preventDefault()

I am showing a text area in a modal when I pressed tab it moves to the next input I wrote code to stop this but I didn't work for me.(when I pressed tab the execution even not coming to the acceptTabsSpace function)
$(document).on("keyup", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e){
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
return false;
}
}
Add the listener to trigger on keydown instead:
$(document).on("keydown", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e){
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
e.preventDefault();
return false;
}
}
Use keydown instead key up and for tabspaces press tab twice.
$(document).on("keydown", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e) {
var keyCode = e.keyCode || e.which;
if (e.keyCode === 9) {
e.preventDefault();
this.value = this.value.substring(0, this.selectionStart) + "\t" +
this.value.substring(this.selectionEnd);
this.selectionEnd = s + 1;
}
}

Is there a way in JavaScript to change Enter to Shift + Enter

This is what I tried and obviously failed:
ed.on('keyup', function(e){
console.log(e.keyCode)
if(e.keyCode == 13 && !e.shiftKey){
e.shiftKey = true;
e.keyCode = 13;
$(this).trigger(e);
}
else if (e.keyCode == 13 && e.shiftKey){
e.shiftKey = false;
e.keyCode = 13;
$(this).trigger(e);
}
});
Is there a way to do this cause based on what I seen I think I'm on the right track and most likely just not triggering it early or something similar.
Additionally, I tried using 'keypress' instead and had no luck with that.
document.onkeydown = function onkeydown(e) {
if (e.keyCode == 13 && e.shiftKey==false) {
e.preventDefault();
document.execCommand("insertLineBreak");
}
}
When enter is pressed without shift, trigger keydown with enter and shift!
$('input').on('keydown', function(event) {
if (event.keyCode == 13 && !event.shiftKey) {
$(this).trigger(jQuery.Event("keydown", {
keyCode: 13, // ENTER
shiftKey: true
}));
} else if (event.keyCode == 13 && event.shiftKey) {
console.log('shift + enter');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>

Adding keypress Events that use an existing function

I have used a function which is activated on click events. I want to do the same using keypress events.
function addToText(target) {
var exp = target.target;
//alert(exp.value);
if (newExp) {
//clearText();
document.getElementById("expression").value = exp.value;
newExp=false;
}
else
document.getElementById("expression").value = document.getElementById("expression").value + exp.value;
}
This is the function used. How do I modify it to use for keypress events also. Currently, it does not work initially(for keypress events). But after clicking once, then any keypress returns the same number that was previously clicked.
Full code here:http://codepen.io/jpninanjohn/pen/JXVpYb?editors=1010
Here's is your final solution, I test if charcode is between 48 and 57, what it means, numbers between 0 and 9.
document.addEventListener('keypress', function(e){
if (e.which >= 48 && e.which <= 57)
document.getElementById("expression").value+= String.fromCharCode(e.which);
});
You can use this function-
window.onkeyup = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
document.getElementById("expression").value += key-48; //for getting the number
alert(key);
if (key == 38) {
//whatever
}else if (key == 40) {
// whatever
}
}
source
And you need to add + to the =
document.getElementById("expression").value+=
instead of -
document.getElementById("expression").value=
You have to add a different function for keyPress event, because the keypress event get the value of pressed key differently, not target.target
function addToTextKeypress(event) {
var exp = String.fromCharCode(event.keyCode);
//alert(exp);
if (newExp) {
//clearText();
document.getElementById("expression").value = exp;
newExp=false;
}
else
document.getElementById("expression").value = document.getElementById("expression").value + exp;
}
Later you need to remove exp.value since it has the direct value

How to limit Tab listener to callback only if the textbox has change

I'm trying to implement a Tab key listener for a textbox.
$('#mytextbox').live('keydown', function (e) {
if (e.keyCode == 9 || e.which == 9) {
// TO DO SOMETHING
}
});
However, for some reason I need to limit the tab listener's callback to invoke only when the textbox has changed. Is there anyway to do this?
You might be able to check the value of the input field to make sure it's different from it's original value?
E.g.
$('#mytextbox').live('keydown', function (e) {
if ((e.keyCode == 9 || e.which == 9) && ($('#TextBox').val() != 'Starting Value')) {
// TO DO SOMETHING
}
});
You can do it just like:
var data = "";
$('#mytextbox').live('keydown', function (e){
if(e.which == 9 || e.keyCode == 9){
if($(this).val() != data){
alert('changed!');
data = $(this).val();
}
}
});
http://jsfiddle.net/DDCZS/1/
Or without storing / knowing value of that textbox:
var changed = false;
$('#mytextbox').on('keydown', function (e) {
if (e.which == 9 && changed) {
e.preventDefault();
// TO DO SOMETHING
alert("works");
changed = false;
} else {
changed = true;
}
});
http://jsfiddle.net/9a37b/

Disable backspace and delete key with javascript in IE

Anyone know how can I disable backspace and delete key with Javascript in IE? This is my code below, but seems it's not work for IE but fine for Mozilla.
onkeydown="return isNumberKey(event,this)"
function isNumberKey(evt, obj)
{
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode == 8 || charCode == 46) return false;
return true;
}
This event handler works in all the major browsers.
function onkeyup(e) {
var code;
if (!e) var e = window.event; // some browsers don't pass e, so get it from the window
if (e.keyCode) code = e.keyCode; // some browsers use e.keyCode
else if (e.which) code = e.which; // others use e.which
if (code == 8 || code == 46)
return false;
}
You can attach the event to this function like:
<input onkeyup="return onkeyup()" />
update based on #JoeCoders comment and the 'outdatedness' of my answer, I revised it.
document.querySelector([text input element]).onkeydown = checkKey;
function checkKey(e) {
e = e || event;
return !([8, 46].indexOf(e.which || e.keyCode || e.charCode) > -1);
}
See also this jsFiddle
This code cancels backspace action.
window.onkeydown = function (event) {
if (event.which == 8) {
event.preventDefault(); // turn off browser transition to the previous page
// put here code you need
};
};
$(document).keydown(function(e) {
if (e.keyCode === 8) {
var element = e.target.nodeName.toLowerCase();
if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly")) {
return false;
}
}
});

Categories