SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with JS and select element

    This is doing my heeed in.I am using an onfocus event handler on a selection list like so:...el[i].onfocus = showValues; //snipped, part of a larger function...function showValues(){var objList = this.name;for (i=1; i
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  2. #2
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh bugger. Code stripped - will try again later from home.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  3. #3
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, let's try this again:

    --

    This is doing my heeed in and am hoping that JavaScript Ninja here might know what the problem is (summary - suspected timing issue).

    I am using an onfocus event handler on a selection list like so:

    ...
    el[i].onfocus = showValues;



    And the function that gets called:

    function showValues()
    {
    var objList = this.name;
    for (i=1; i<11; i++)
    {
    eval("document.forms['frmSign'].elements['" + objList + "'].options[" + i + "].text='" + (-1) + "'");
    }
    }

    This eval basically produces this list like this (1 blank and 0-9 characters):

    document.forms['frmSign'].elements['sel1'].options[0].text='0';
    document.forms['frmSign'].elements['sel1'].options[1].text='1';
    document.forms['frmSign'].elements['sel1'].options[2].text='2';
    document.forms['frmSign'].elements['sel1'].options[3].text='3';

    Etc

    The example is shown here:

    http://lloydi.com/experiments/select-problem/


    However, I'm having a *usability* problem in IE:

    * The user clicks on the selection list element
    * The showValues script is triggered and populates the values
    * The selection list remains closed
    * The user has to click a *second* time to display the list

    Effectively, it feels like the following has *actually* happened:

    * The user clicks on the selection list element
    * IE opens the list ==========
    * The onfocus event occurs ====
    * The showValues script is triggered and populates the values, but closes the list in the process
    * The selection list remains closed
    * The user has to click a second time to display the list

    I suspect that /other/ browsers fire things in this order:

    * The user clicks on the selection list element
    * The onfocus event occurs
    * The showValues script is triggered and populates the values
    * the browser opens the select list

    Bottom line - by dynamically changing the content in the lists onficus, IE is causing the user to have to click twice.

    I'm hoping that someone might have some insight as to how I can get around this problem. I was hoping that there might be some kind of command I can call after the values are updated to *force* IE to
    once again display the list of items in the select.

    Any ideas? I've been trying all sorts of permutations for much of the day and it's driving me crackers!
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The rel attribute is only allowed on certain elements (link and a, not sure about any others) and from what I can tell, select isn't one of them. So I changed it to a class. And never use eval() unless there is absolutely no other solution!

    Pretty horrible IE bug, this needing to click twice thing. I hate it so much. To stop the user having to click twice, one solution is to have the first SELECT focused from the beginning. I don't know if this is acceptable. One problem is that once the user selects the 4th digit, if they need to change it again they will have to click twice. But I can't see any other way to bypass this bug.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Select problem</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #frmsignon label {display:block;float:left;width:150px;}
    </style>
    <script type="text/javascript" src="add-event.js"></script>
    <script type="text/javascript">
    var hideChar = "*"; //can change this to another character if preferred
    var currentEvent;
    
    function addDDLBehaviours() {
    //adds a behaviour to all submit buttons - disables after click to stop multiple submissions
    var el = document.getElementsByTagName("select");
    for (i=0;i<el.length;i++)
        {
        if(el[i].className === "obfuscate") {
          setFocus();
            //show the value
            el[i].onmousedown = function() {currentEvent='click'}
            el[i].onkeydown = function() {currentEvent=0}
            el[i].onfocus = showValue;
            el[i].onblur = hideValue;
            //manage auto-tabbing
            el[i].onchange = setFocus;
         }
        }
    }
    
    function showValue() {
      var objList = this.getElementsByTagName('option');
      for (i = 0; i < objList.length; i++) {
          objList[i].text = i+1;
        }
    }
    function hideValue() {
      var objList = this.getElementsByTagName('option');
      for (i = 0; i < objList.length; i++) {
            objList[i].firstChild.nodeValue = hideChar;
        }
    }
    function setFocus() {
        // only move the focus to next element if activated using mouse
        // keyboard (arrow key) users must be able to change value without being moved on automatically
        var sels = document.getElementById('frmsignon').getElementsByTagName('select');
        if (currentEvent === 'click') {
          for (var i = 0; i < sels.length; i++) {
                if (this.name == sels[i].name) {
                  if (i+1 < sels.length) sels[i+1].focus();
                  else document.getElementById('cmdShowValues').focus();
                  break;
                }
          }
      }
      else sels[0].focus();
    }
    window.onload = addDDLBehaviours</script>
    </head>
    
    <body>
    
    <form action="" method="post" id="frmsignon" name="frmsignon">
    
     <div>
     <span><label for="lstPassDigit1">1st Digit:</label></span>
     <span><select name="lstPassDigit1" id="lstPassDigit1" title="" class="obfuscate">
        <option value="0"> </option>
        <option value="1"> </option>
        <option value="2"> </option>
        <option value="3"> </option>
        <option value="4"> </option>
        <option value="5"> </option>
        <option value="6"> </option>
        <option value="7"> </option>
        <option value="8"> </option>
        <option value="9"> </option>
    </select></span>
     </div>
    
     <div>
     <span><label for="lstPassDigit2">3rd Digit:</label></span>
     <span><select name="lstPassDigit2" id="lstPassDigit2" title="" class="obfuscate">
        <option value="0"> </option>
        <option value="1"> </option>
        <option value="2"> </option>
        <option value="3"> </option>
        <option value="4"> </option>
        <option value="5"> </option>
        <option value="6"> </option>
        <option value="7"> </option>
        <option value="8"> </option>
        <option value="9"> </option>
    </select></span>
     </div>
    
     <div>
     <span><label for="lstPassDigit3">4th Digit:</label></span>
    
     <span><select name="lstPassDigit3" id="lstPassDigit3" title="" class="obfuscate">    
        <option value="0"> </option>
        <option value="1"> </option>
        <option value="2"> </option>
        <option value="3"> </option>
        <option value="4"> </option>
        <option value="5"> </option>
        <option value="6"> </option>
        <option value="7"> </option>
        <option value="8"> </option>
        <option value="9"> </option>
    </select></span>
    </div>
    
     <div><input name="cmdShowValues" id="cmdShowValues" type="button" value="Show the underlying values" onclick="showValues();" /></div>
    
    </form>
    
    </body>
    </html>


Bookmarks

Posting Permissions

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