Author: Subrata Chakrabarty

Declaration

Please test the Code thoroughly before implementation as it may be browser dependent. This code on Editable Dropdowns has been tested thoroughly on Internet Explorer 5.5 & 6.0.

Subrata Chakrabarty

Target readers : Developers

Keywords : Editable,Dropdown,Edit

Technologies used: Javascript,HTML

EDITABLE DROPDOWN:

Editable Drop down -by Subrata Chakrabarty. FEATURES:

Dear Reader, I have written a set of javascript functions for "Editable Dropdowns"... FEATURES: 1. Only the last option is Editable. 2. Rest of the options are read-only (as in a normal dropdown). 3. The Editable Dropdown can be customized to the following formats: a) Editable Dropdown in the format: Left Aligned, Fixed Width, Left To Right Flow b) Editable Dropdown in the format: RIGHT Aligned, Fixed Width, RIGHT TO LEFT FLOW (Content flows right to left) c) Editable Dropdown in the format: Left Aligned, VARIABLE WIDTH, Left To Right Flow 4. Does not tolerate the famous "Backspace" bug or "automatic Jump" bug. 5. The characters to be allowed/disallowed in Editable Option can be customized. 6. Overcomes all the bugs I have come across in other logic/codes for Editable dropdowns. It works beautifully !!! These set of functions do NOT have the following bugs commonly associated with "Editable Drop-downs" : 1. "Backspace" bug : A "Backspace" keypress in the dropdown works like a BACK button on Internet Explorer !! (...hence editing is hampered ) 2. The "automatic Jump" bug: If a alphabet is entered (while editing) ... which is contained as a first character ... in one of the read-only options ... the focus automatically "jumps" to the read-only option (* this is a common property of normal dropdowns ..but..is undesirable while editing). 3. CAPS bug : Values Entered are always displayed in CAPS ....lower case not possible. 4. Gives Javascript error when dropdown is empty & key is pressed. 5. Doesn't allow the certain special characters.. (this can be customized in my code) The new set of functions I have written do not have any of these bugs,also the various characters allowable for entry into Editable option..may be customized by minor modifications in the code (you need to know the keycode/ASCII value of the character to be allowed/disallowed). Hope you will find this code useful. You can contact me anytime for clarifications/suggestions. THANKING YOU, WITH REGARDS, Subrata Chakrabarty. chakrabartys@yahoo.com Jan.2003,Bangalore, India.

SCRIPT:

<!-- *************************************************************** TWO STEPS TO INSTALL EDITABLE DROP DOWN - Subrata Chakrabarty.: 1. Copy the first part of the coding (javascript) into the HEAD of your HTML document 2. Add the last part of code (HTML) into the BODY of your HTML document 3. -------------------------------------------- (a) The code available below will give the Editable Dropdown in the format: Left Aligned, Fixed Width, Left To Right Flow -------------------------------------------- (b) To Change the Editable Dropdown to the format: RIGHT Aligned, Fixed Width, RIGHT TO LEFT FLOW (Content flows right to left) add / include style="direction:rtl;" into the SELECT option (in the BODY of your HTML document), i.e., <SELECT style="direction:rtl;" ... leaving the rest of the parameters as they are. -------------------------------------------- (c) To Change the Editable Dropdown to the format: Left Aligned, VARIABLE WIDTH, Left To Right Flow replace ALL the ".innerText" with ".text" (in the HEAD (SCRIPT) of your HTML document) each & every occurence of .innerText should be replaced with .text -------------------------------------------- *************************************************************** ** Note : you may wish to simply select-all & copy the entire contents of this script & save it as a html for testing etc.. *************************************************************** *************************************************************** --> <!-- ************************************************************ ************************************************************ STEP ONE: Paste the following code into the HEAD of your HTML document ************************************************************ ************************************************************ --> <!--******* Start of "HTML" document *******--> <HTML> <!--******* Start of "HEAD" (of HTML document) *******--> <HEAD> <TITLE>Editable Menu - Subrata Chakrabarty</title> <SCRIPT LANGUAGE="JavaScript"> /*------------------------------------------------ Variables required for fnChangeHandler() & fnKeyPressHandler() for Editable Dropdowns -------------------------- Subrata Chakrabarty 3.Jan.2003 */ var PreviousSelectIndex = 0; /* Contains the Previously Selected Index */ var SelectIndex = 0; /* Contains the Currently Selected Index */ var SelectChange = 'MANUAL_CLICK'; /* Indicates whether Change in dropdown selected value */ /* was due to a Manual Click */ /* or due to System properties of dropdown */ /*------------------------------------------------ Functions required for Editable Dropdowns -------------------------- Subrata Chakrabarty 3.Jan.2003 */ function fnChangeHandler() { PreviousSelectIndex = SelectIndex; /* Contains the Previously Selected Index */ SelectIndex = document.frmName.lstDropDown.options.selectedIndex; /* Contains the Currently Selected Index */ if ((PreviousSelectIndex == (document.frmName.lstDropDown.options.length - 1)) && (SelectIndex != (document.frmName.lstDropDown.options.length - 1))&&(SelectChange != 'MANUAL_CLICK')) /* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */ { document.frmName.lstDropDown[(document.frmName.lstDropDown.options.length - 1)].selected=true; PreviousSelectIndex = SelectIndex; SelectIndex = document.frmName.lstDropDown.options.selectedIndex; SelectChange = 'MANUAL_CLICK'; /* Indicates that the Change in dropdown selected value was due to a Manual Click */ } } function fnKeyPressHandler() { if(document.frmName.lstDropDown.options.length != 0) /*if dropdown is not empty*/ if (document.frmName.lstDropDown.options.selectedIndex == (document.frmName.lstDropDown.options.length - 1)) /*if option the Editable field i.e. the last option */ { var EditString = EditMe.innerText; /* Contents of Editable Option */ if (EditString == "--?--") /* On backspace on default value of Editable option make Editable option Null */ EditString = ""; if ((window.event.keyCode==8 || window.event.keyCode==127)) /* To handle backspace - Subrata Chakrabarty 3.Jan.2003 */ { EditString = EditString.substring(0,EditString.length-1); /* Decrease length of string by one from right */ SelectChange = 'MANUAL_CLICK'; /* Indicates that the Change in dropdown selected value was due to a Manual Click */ } /* Check for allowable Characters */ /* The various characters allowable for entry into Editable option.. may be customized by minor modifications in the code (if condition below) (you need to know the keycode/ASCII value of the character to be allowed/disallowed. - Subrata Chakrabarty 3.Jan.2003 */ if ((window.event.keyCode==46) || (window.event.keyCode>47 && window.event.keyCode<59)||(window.event.keyCode>62 && window.event.keyCode<127) ||(window.event.keyCode==32)) /* To handle addition of a character - Subrata Chakrabarty 3.Jan.2003 */ { EditString+=String.fromCharCode(window.event.keyCode); /*Concatenate Enter character to Editable string*/ /* The following portion handles the "automatic Jump" bug*/ /* The "automatic Jump" bug (Description): If a alphabet is entered (while editing) ...which is contained as a first character in one of the read-only options ..the focus automatically "jumps" to the read-only option (-- this is a common property of normal dropdowns ..but..is undesirable while editing). */ var i=0; var EnteredChar = String.fromCharCode(window.event.keyCode); var UpperCaseEnteredChar = EnteredChar; var LowerCaseEnteredChar = EnteredChar; if(((window.event.keyCode)>=97)&&((window.event.keyCode)<=122)) /*if EnteredChar lowercase*/ UpperCaseEnteredChar = String.fromCharCode(window.event.keyCode - 32); /*This is UpperCase*/ if(((window.event.keyCode)>=65)&&((window.event.keyCode)<=90)) /*if EnteredChar is UpperCase*/ LowerCaseEnteredChar = String.fromCharCode(window.event.keyCode + 32); /*This is lowercase*/ for (i=0;i<(document.frmName.lstDropDown.options.length-1);i++) { var ReadOnlyString = document.frmName.lstDropDown[i].innerText; var FirstChar = ReadOnlyString.substring(0,1); if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar)) { SelectChange = 'AUTO_SYSTEM'; /* Indicates that the Change in dropdown selected value was due to System properties of dropdown */ break; } else { SelectChange = 'MANUAL_CLICK'; /* Indicates that the Change in dropdown selected value was due to a Manual Click */ } } } /*Set new value of edited string into the Editable field */ EditMe.innerText = EditString; EditMe.value = EditString; return false; } return true; } /*-------------------------------------------------------------------------------------------- Subrata Chakrabarty 3.Jan.2003 */ </script> <!--******* End of "HEAD" (of HTML document) *******--> </head> <!-- ************************************************************ ************************************************************ STEP TWO: Copy the following code into the BODY of your HTML document ************************************************************ ************************************************************ --> <!--******* Start of "BODY" (of HTML document) *******--> <BODY> <FORM name="frmName" method="post"> <SELECT name="lstDropDown" onKeyDown="if(window.event.keyCode == 8 || window.event.keyCode==127){window.event.keyCode = '';return true;}window.event.keyCode = '';return true;" onKeyUp="return false" onKeyPress = "fnKeyPressHandler()" onChange="fnChangeHandler()"> <OPTION value="" selected></option> <option>Subrata</option> <option>Chakrabarty</option> <option>Tiger</option> <option>Bangalore</option> <option>India</option> <OPTION id="EditMe" name="EditMe" value="" style="COLOR:#ff0000;BACKGROUND-COLOR:#ffff00;" >--?--</option> </select> </form> <!--******* End of "BODY" (of HTML document) *******--> </body> <!--******* End of "HTML" document *******--> </html>

References

--