cross browser FF style SELECT element

Discussion in 'Javascript' started by Csaba Gabor, Mar 25, 2006.

  1. Csaba  Gabor

    Csaba Gabor Guest

    The below is an example of a select element that work in FF 1.5 and IE
    6 that exhibits FF type behaviour. You make a selection by clicking on
    an option, pressing Enter when it is highlighted, or removing focus
    from the select element. This contrasts from IE's way in that IE
    effects a selection when you navigate with the arrow keys, or close the
    opened select element (via alt+up/down arrow).

    What happens in the example is that whenever a selection is made, the
    select element immediately resets itself. The "Dummy link" is in the
    example to provide a focusable element for tabbing away from the select
    element.

    A question in the opposite direction of getting FF select elements to
    behave as IE's was discussed last August at:
    http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/618645fa2fe904be/

    Enjoy,
    Csaba Gabor from Vienna

    <html><head><title>Unselectable options</title></head>
    <body onload="init()">
    This page shows a cross browser (IE and FF) select element
    that responds when the element is changed according to the FF
    notion.<br>
    In particular, change is registered when you click
    on an option, you press Enter on it, or focus leaves
    the select element.
    <br><br>
    Notice that change is not registered when you use the arrow keys
    (as it would be under IE), nor the Alt+up/down arrow keys.<br>
    Remember that if you have the select element dropped down, you will
    need two mouse clicks to remove focus from the it.
    <br><br>
    <form name=cform method=post action="">
    <select title='access key: s' alt='access key: s'
    accessKey=s name=mySel id=mySel>
    <option>Make selection</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option></select> &nbsp; &nbsp;
    <a href="" onclick='return false;'>Dummy link</a>
    </form>
    <div id=res>SELECT events:</div>

    <script type='text/javascript'>
    window.ctr = 0; // statistical, debugging info

    function init() {
    var mySel = document.getElementById('mySel');
    mySel.style.width = mySel.offsetWidth;
    mySel.options[0].style.display = "none";
    if (document.all) {
    mySel.onclick = function(){action2(this);}
    mySel.onblur = function(){action2(this);}
    mySel.onkeydown = selKeyDown;
    } else if (mySel.addEventListener) {
    mySel.addEventListener("click", function(){action2(this)}, false);
    mySel.addEventListener("change", function(){action2(this)}, false);
    }
    }

    function selKeyDown() {
    // detect Enter key (sans alt), then allow for settling
    if (window.event.keyCode==13 && !window.event.altKey)
    window.setTimeout(function(ctl){ return function() {
    action2(ctl);}}(this),100);
    }

    function action2(selElem) {
    ctr++;
    if (!selElem || !selElem.selectedIndex) return;
    // --- The actual action goes here ---
    var res = document.getElementById('res');
    res.innerHTML += (res.innerHTML ? "<br>" : "")+
    "[" + (ctr++) + "] " + selElem.id + " => ";
    res.innerHTML += selElem.options[selElem.selectedIndex].text;
    selElem.selectedIndex = 0;
    }
    </script>
    </body></html>
     
    Csaba Gabor, Mar 25, 2006
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jeff
    Replies:
    13
    Views:
    1,163
    vanilla
    Oct 6, 2007
  2. Timo
    Replies:
    4
    Views:
    143
  3. Brian D

    style.display cross browser problem

    Brian D, Sep 27, 2006, in forum: Javascript
    Replies:
    1
    Views:
    145
  4. Replies:
    3
    Views:
    183
  5. Replies:
    5
    Views:
    200
Loading...

Share This Page