...

View Full Version : Increment/Decrement input field with arrow keys.



Scriptdaemon
12-14-2006, 06:32 AM
I can't quite figure out how to increase or decrease a number value in the fields I use for my test script here:

http://moth.homelinux.com/~scriptdaemon/test.html

When you click the CD/DVD link, it'll turn both into an input field, and I want it to do absolutely nothing if you press any key other than the up or down arrow or enter key. When you press the up arrow, I want it to increase the value by one, and the same for the down arrow, only decreasing it (but stopping at zero and not allowing you to go below that).

There are the main functions that deal with anything about those input fields.


function editItems(number) {
if(edited)
return;
edited = true;
document.getElementById("itemsTd" + number).innerHTML = "CDs: <input type=\"text\" id=\"cdsInput" + number + "\" onkeypress=\"if(isEnter(event)) { saveCds(" + number + "); }\" value=\"" + rows[number - 1].cds + "\" />";
document.getElementById("itemsTd" + number).innerHTML += " DVDs: <input type=\"text\" id=\"dvdsInput" + number + "\" onkeypress=\"if(isEnter(event)) { saveDvds(" + number + "); }\" value=\"" + rows[number - 1].dvds + "\" />";
document.getElementById("cdsInput" + number).focus();
document.getElementById("cdsInput" + number).select();
}
function saveCds(number) {
var noOfCds = document.getElementById("cdsInput" + number).value;
noOfCds = noOfCds.replace(/^\s*|\s*$/g, "");
if(noOfCds == "")
noOfCds = rows[number - 1].cds;
rows[number - 1].cds = noOfCds;
if(dvds) {
if(rows[number - 1].cds == 0 && rows[number - 1].dvds == 0) {
alert("There must be at least one disc.");
return false;
}
createTable();
edited = false, cds = false, dvds = false;
} else {
var noOfDvds = document.getElementById("dvdsInput" + number).value;
document.getElementById("itemsTd" + number).innerHTML = rows[number - 1].cds + " CD";
document.getElementById("itemsTd" + number).innerHTML += " DVDs: <input type=\"text\" id=\"dvdsInput" + number + "\" onkeypress=\"if(isEnter(event)) { saveDvds(" + number + "); }\" value=\"" + noOfDvds + "\" />";
document.getElementById("dvdsInput" + number).focus();
document.getElementById("dvdsInput" + number).select();
cds = true;
}
return false;
}
function saveDvds(number) {
var noOfDvds = document.getElementById("dvdsInput" + number).value;
noOfDvds = noOfDvds.replace(/^\s*|\s*$/g, "");
if(noOfDvds == "")
noOfDvds = rows[number - 1].dvds;
rows[number - 1].dvds = noOfDvds;
if(cds) {
if(rows[number - 1].cds == 0 && rows[number - 1].dvds == 0) {
alert("There must be at least one disc.");
return false;
}
createTable();
edited = false, cds = false, dvds = false;
} else {
var noOfCds = document.getElementById("cdsInput" + number).value;
document.getElementById("itemsTd" + number).innerHTML = "CDs: <input type=\"text\" id=\"cdsInput" + number + "\" onkeypress=\"if(isEnter(event)) { saveCds(" + number + "); }\" value=\"" + noOfCds + "\" /> ";
document.getElementById("itemsTd" + number).innerHTML += rows[number - 1].dvds + " DVD";
document.getElementById("cdsInput" + number).focus();
document.getElementById("cdsInput" + number).select();
dvds = true;
}
return false;
}

vegu
12-14-2006, 07:10 PM
Setting the onkeydown event on the spawned input fields to a function that returns false if any key but the enter key is pressed should work. In that function you can also handle increasing and decreasing the value of the field



input.onkeydown = function(e) {
if(!e)
var e = event;
var key = e.which ? e.which : e.keyCode;

if(key == 38) { // up key
this.value = parseInt(this.value)+1;
} else if(key == 40) { // down key
if(parseInt(this.value) > 0)
this.value = parseInt(this.value)-1;
} else if(key == 13) // enter key
return true;

return false;
};

Scriptdaemon
12-14-2006, 10:57 PM
Ah, that's why it wasn't working. I wasn't using parseInt().

Scriptdaemon
12-15-2006, 05:06 AM
The browser I normally use is Firefox, but I tested this part in Internet Explorer and it's not working.

Edit: I did a little more research and found out that it is a problem with the keyCode, since 38 = "&" and 40 = "(" in IE. How would I be able to capture the arrow keys in Internet Explorer as well?

vegu
12-15-2006, 03:22 PM
Are you using onkeypress or onkeydown?

onkeypress wont fire in ie on arrow keys

the code example above works fine for me in both ie and firefox

/vegu

Scriptdaemon
12-15-2006, 06:58 PM
Oh, I see. Thanks.

Scriptdaemon
12-16-2006, 06:11 AM
I've fixed this problem by assigning a variable either "onKeyDown" if the browser is Internet Explorer or "OnKeyPress" if it is anything else, but now I've noticed the CD or DVD fields don't gain focus when you press enter in the opposite field.

Example: Click a CD/DVD link, press enter in either field, then it SHOULD bring focus to the remaining field in Internet Explorer, but it doesn't. I don't have this problem in Firefox.

(Link is in first post.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum