Web Analytics Made Easy -
StatCounter Editable Dropdowns - CodingForum

Announcement

Collapse
No announcement yet.

Editable Dropdowns

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Editable Dropdowns

    I am looking for a way to make a Dropdown box editable by the user. I found some code but it does not allow the user to just click on the box and begin editing the content. It currently allows the user to select one of the selected indexes and then begin to edit. Can anyone help me with this. Here is the code that I have:
    Thanks in advance. This code may help someone else as well.

    <head>
    <script LANGUAGE="JavaScript" >
    <!-- Begin
    var o = null;
    var isNN = (navigator.appName.indexOf("Netscape")!=-1);

    function beginEditing(menu){
    finish();

    if(menu[menu.selectedIndex].value == "editable"){
    o = new Object();
    o.editOption = menu[menu.selectedIndex];
    o.editOption.old = o.editOption.text;
    o.editOption.text = "";
    menu.blur();
    window.focus();
    document.onkeypress = keyPressHandler;
    document.onkeydown = keyDownHandler;

    }
    function keyDownHandler(e){
    var keyCode = (isNN)?e.which:event.keyCode;
    return (keyCode!=8 || keyPressHandler(e));
    }
    function keyPressHandler(e){
    var option = o.editOption;
    var keyCode = (isNN)?e.which:event.keyCode;
    if(keyCode==8 || keyCode==37)
    option.text = option.text.substring(0,option.text.length-2)+" ";
    else if(keyCode==13){
    finish();
    } else if(keyCode!=0)
    option.text = option.text.substring(0,option.text.length-1) + String.fromCharCode(keyCode) + " ";
    return false;
    }
    function finish(){
    if(o!=null){
    option = o.editOption;
    if(option.text.length > 1)
    option.text = option.text.substring(0,option.text.length-1);
    else
    option.text = option.old;
    document.onkeypress = null;
    document.onkeydown = null;
    o = null;
    }
    }
    }

    function getvalue()
    {
    //alert("hi");
    editable ="cbodetails" ;
    alert(document.frmMisload.elements[editable].options[document.frmMisload.elements[editable].selectedIndex].text);

    document.frmMisload.txtoption.value = document.frmMisload.cbodetails.options[document.frmMisload.cbodetails.selectedIndex].text;
    }

    //-->
    </script>

    <title>New Page </title>

    </head>

    <body bgcolor="#FFFFFF" text="#003399" link="#CC9900" vlink="#666699" alink="#CC3399">
    <form name="frmMisload" action="drop.htm" method="post">
    <select name="cbodetails" onChange="beginEditing(this);" size=1>
    <option></option>
    <option value="editable">edit</option>
    <option value="choice0">choice0</option>
    <option value="choice1">choice1</option>
    <option value="choice2">choice2</option>
    </select>
    <input type="hidden" name="txtoption">
    <input type="submit" value="go" onclick="return getvalue();">
    </form>
    </body>
    </html>

  • #2
    Take a look at this:
    http://www.webfx.eae.net/dhtml/combobox/combobox.htm

    jasonkarldavis.com

    Comment


    • #3
      I cannot use third party components at UPS unless they are on our grid of components or software.

      Comment


      • #4
        so let's say i want to use this code with IE instead of Netscape. how should the netscape code change to fit IE? I am not really sure since i use IE only and have not had to deal with Netscape.

        Dan

        Comment

        Working...
        X