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

    focus(); not working in IE.

    This function works perfectly in Firefox, however in IE it does not focus when it should. For an example of what this does, click any of the "1 CD, 1 DVD" links on this test page http://moth.homelinux.com/~scriptdaemon/test/test.html

    What should occur is shown in Firefox. It should focus on the CD input field after clicking the link and then focus on the DVD input field after enter is pressed in the CD input field, or vice versa depending on which field was submitted first. In IE, this doesn't focus in any occasion at all.

    Code:
    function editItems(number) {
    	if(edited)
    		return;
    	edited = true;
    	var tD = document.getElementById("itemsTd" + number);
    	tD.align         = "center";
    	tD.style.padding = "0px";
    	tD.innerHTML     = "<input type=\"text\" id=\"cdsInput\" style=\"width: 16px\" value=\"" + rows[number].cds + "\" />";
    	tD.innerHTML    += " <input type=\"text\" id=\"dvdsInput\" style=\"width: 16px\" value=\"" + rows[number].dvds + "\" />";
    	var cdField = document.getElementById("cdsInput"), dvdField = document.getElementById("dvdsInput");
    	cdField.focus();
    	var save = function() {
    		if(rows[number].cds == 0 && rows[number].dvds == 0) {
    			alert("There must be at least one disc.");
    			return;
    		}
    		createTable();
    		edited = false;
    	};
    	cdField.onkeydown = function(event) {
    		if(isEnter(event, this)) {
    			rows[number].cds = cdField.value;
    			tD.innerHTML  = rows[number].cds + " CD";
    			tD.innerHTML += " <input type=\"text\" id=\"dvdsInput\" style=\"width: 16px\" value=\"" + dvdField.value + "\" />";
    			dvdField = document.getElementById("dvdsInput");
    			dvdField.focus();
    			dvdField.onkeydown = function(event) {
    				if(isEnter(event, this)) {
    					rows[number].dvds = dvdField.value;
    					save();
    				}
    			};
    		}
    	};
    	dvdField.onkeydown = function(event) {
    		if(isEnter(event, this)) {
    			rows[number].dvds = dvdField.value;
    			tD.innerHTML  = "<input type=\"text\" id=\"cdsInput\" style=\"width: 16px\" value=\"" + cdField.value + "\" /> ";
    			tD.innerHTML += rows[number].dvds + " DVD";
    			cdField = document.getElementById("cdsInput");
    			cdField.focus();
    			cdField.onkeydown = function(event) {
    				if(isEnter(event, this)) {
    					rows[number].cds = cdField.value;
    					save();
    				}
    			};
    		}
    	};
    }
    EDIT: You should also probably know, while not relevant to this problem, only the up and down arrows effect what's in the input fields after clicked.
    Last edited by Scriptdaemon; 05-02-2007 at 05:59 AM.

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure I understand exactly what is going on behind the scenes but I have an idea how to fix it. The problem appears to be that IE isn't able to find the element with the id yet. So what you can do is set a timeout to set the focus which gives IE time to "solidify" the DOM enough to find it correctly. It's an odd situation because sometimes what you are doing works.

    Anyway, to fix it try replacing this line

    cdField.focus();

    with

    setTimeout(function () { cdField.focus(); }, 0);

    Here is a quick example I used to test it myself to see if it works. The problem appears to be in the innerHTML += part which you might also be able to change to solve the problem (avoiding doing += on innerHTML is a good idea anyway).

    Code:
    <html>
      <head>
        <title>Pause on Focus</title>
        <script type="text/javascript">
          function doItNow() {
            var adiv = document.getElementById("adiv");
            adiv.innerHTML = "<input type='text' id='t'/>";
            adiv.innerHTML += "<input type='text' id='s'/>";
            document.getElementById("t").focus();
          }
    
          function doItSoon() {
            var adiv = document.getElementById("adiv");
            adiv.innerHTML = "<input type='text' id='t'/>";
            adiv.innerHTML += "<input type='text' id='s'/>";
            setTimeout(function () {
              document.getElementById("t").focus();
            }, 0);
          }
    
          function clearIt() {
            var adiv = document.getElementById("adiv");
            adiv.innerHTML = "";
          }
        </script>
      </head>
      <body>
        <div>
          <button onclick="doItNow();">Do it now</button>
          <button onclick="doItSoon();">Do it soon</button>
          <button onclick="clearIt();">Clear it</button>
          <br />
          <div id="adiv"> </div>
        </div>
      </body>
    </html>
    david_kw

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    95
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I did not know that += should be avoided when regarding innerHTML, so thanks for that. I put them on the same line just to quickly test if that was entirely the problem, and now it will focus when you initially click the link, however it does not effect after you submit the first input field (I took out all instances of += when dealing with innerHTML, and it only fixed the initial focus).

    Though, when adding the timeout (only changing 0 to 1 instead), it does work for the latter two parts.

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Typically I have heard to avoid += with innerHTML for speed issues. It is a much slower operation to do the addition on innerHTML than it is on an intermediate variable. This is the first time I've seen this particular problem with it.

    david_kw


  •  

    Posting Permissions

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