Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Increment/Decrement input field with arrow keys.

    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.

    Code:
    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;
    }

  • #2
    New Coder
    Join Date
    Dec 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    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;
    };
    http://demo.vegui.org - vegUI AJAX framework
    http://www.landsofkazram.com - browser based graphical MMORPG

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ah, that's why it wasn't working. I wasn't using parseInt().

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?
    Last edited by Scriptdaemon; 12-15-2006 at 05:32 AM.

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    http://demo.vegui.org - vegUI AJAX framework
    http://www.landsofkazram.com - browser based graphical MMORPG

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Oh, I see. Thanks.

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •