Author: Subrata Chakrabarty

Date written(DD/MMM/YYYY): 03/Jan/2003 (First Version)
                                                    01/May/2003 (Modified)
                                                    29/July/2003 (Modified)

Declaration

I hereby declare that this document is based on my personal experiences and / or experiences of my project members. To the best of my knowledge, this document does not contain any material that infringes the copyrights of any other individual or organization including the customers of Infosys.

Subrata Chakrabarty

Project Details

• Projects involved: VTECCRM, VTECCRM2 (SAM)
• H/W Platform: Desktop
• S/W Environment: Internet Explorer 5.5, Oracle Client 8.1.7, Oracle 9i Application Server
• Appln. Type: PL/SQL Server Pages ( PSP )
• Project Type : PL/SQL Server Pages ( PSP )

Target readers : Developers

Keywords : Editable,Dropdown,Edit

Technologies used: Javascript,HTML

EDITABLE Dropdown (ListBox/ComboBox):

Editable Drop down -by Subrata Chakrabarty. FEATURES:

Dear Infoscion, I have written a set of javascript functions for "Editable Dropdowns"... FEATURES: 1. Either the FIRST or LAST option is Editable (as desired). 2. Rest of the options are read-only (as in a normal dropdown). 3.Press [ <- ] and [ -> ] arrow keys on the keyboard to change alignment/flow. ...go to Start : Press [ <- ] Arrow Key ...go to End : Press [ -> ] Arrow Key (this is useful when the edited-text content exceeds the ListBox-fixed-width) 4.Editable Option: Press "BackSpace" to remove last typed character . 5.Editable Option: Press "Delete" to remove all typed characters . 6. 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 7. Does not tolerate the famous "Backspace" bug or "automatic Jump" bug. 8. The characters to be allowed/disallowed in Editable Option can be customized. 9. 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. subrata_chakrabarty@infosys.com chakrabartys@yahoo.com Jan.2003,Infosys,Bangalore.

SCRIPT: First Option Editable

<!-- *************************************************************** 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 ( you may vary the fixed width by altering the style="width:150px;" ) -------------------------------------------- (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="width:150px;direction:rtl;" ... leaving the rest of the parameters as they are. ( you may vary the fixed width by altering the style="width:150px;" ) -------------------------------------------- (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 in the SELECT option (in the BODY of your HTML document), do NOT give style="width:150px;" (* Not giving the width style & using .text(instead of .innerText) will make it 'variable'.) -------------------------------------------- *************************************************************** ** 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_First() & fnKeyPressHandler_First() for Editable Dropdowns -------------------------- Subrata Chakrabarty 3.Jan.2003 */ var PreviousSelectIndex_First = 0; /* Contains the Previously Selected Index */ var SelectIndex_First = 0; /* Contains the Currently Selected Index */ var SelectChange_First = '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_First(getdropdown) { PreviousSelectIndex_First = SelectIndex_First; /* Contains the Previously Selected Index */ SelectIndex_First = getdropdown.options.selectedIndex; /* Contains the Currently Selected Index */ if ((PreviousSelectIndex_First == (0)) && (SelectIndex_First != (0))&&(SelectChange_First != 'MANUAL_CLICK')) /* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */ { getdropdown[(0)].selected=true; PreviousSelectIndex_First = SelectIndex_First; SelectIndex_First = getdropdown.options.selectedIndex; SelectChange_First = 'MANUAL_CLICK'; /* Indicates that the Change in dropdown selected value was due to a Manual Click */ } } function fnKeyPressHandler_First(getdropdown) { if(getdropdown.options.length != 0) /*if dropdown is not empty*/ if (getdropdown.options.selectedIndex == (0)) /*if option the Editable field i.e. the FIRST option */ { var EditString = EditMe_First.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_First = '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<(getdropdown.options.length-1);i++) { var ReadOnlyString = getdropdown[i].innerText; var FirstChar = ReadOnlyString.substring(0,1); if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar)) { SelectChange_First = 'AUTO_SYSTEM'; /* Indicates that the Change in dropdown selected value was due to System properties of dropdown */ break; } else { SelectChange_First = '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_First.innerText = EditString; EditMe_First.value = EditString; return false; } return true; } /*-------------------------------------------------------------------------------------------- Subrata Chakrabarty 3.Jan.2003 */ function fnLeftToRight(getdropdown) { getdropdown.style.direction = "ltr"; } function fnRightToLeft(getdropdown) { getdropdown.style.direction = "rtl"; } function fnDelete(getdropdown) { if(getdropdown.options.length != 0) /*if dropdown is not empty*/ if (getdropdown.options.selectedIndex == (0)) /*if option the Editable field i.e. the FIRST option */ { getdropdown.options[getdropdown.options.selectedIndex].text = ''; } } </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_First" style="width:150px;" onKeyDown="if(window.event.keyCode == 37){fnLeftToRight(this.form.lstDropDown_First);}if(window.event.keyCode == 39){fnRightToLeft(this.form.lstDropDown_First);}if(window.event.keyCode == 46){fnDelete(this.form.lstDropDown_First);}if(window.event.keyCode == 8 || window.event.keyCode==127){window.event.keyCode = '';return true;}if(window.event.keyCode == 9){fnLeftToRight(this.form.lstDropDown_First);}" onKeyUp="return false" onKeyPress = "fnKeyPressHandler_First(this.form.lstDropDown_First)" onChange="fnChangeHandler_First(this.form.lstDropDown_First)"> <OPTION id="EditMe_First" name="EditMe_First" value="" style="COLOR:#ff0000;BACKGROUND-COLOR:#ffff00;" selected>--?--</option> <option>Subrata</option> <option>Chakrabarty</option> <option>Tiger</option> <option>Infosys</option> <option>India</option> </SELECT> </FORM> <!--******* End of "BODY" (of HTML document) *******--> </BODY> <!--******* End of "HTML" document *******--> </HTML>

SCRIPT: Last Option Editable

<!-- *************************************************************** 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 ( you may vary the fixed width by altering the style="width:150px;" ) -------------------------------------------- (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="width:150px;direction:rtl;" ... leaving the rest of the parameters as they are. ( you may vary the fixed width by altering the style="width:150px;" ) -------------------------------------------- (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 in the SELECT option (in the BODY of your HTML document), do NOT give style="width:150px;" (* Not giving the width style & using .text(instead of .innerText) will make it 'variable'.) -------------------------------------------- *************************************************************** ** 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(getdropdown) { PreviousSelectIndex = SelectIndex; /* Contains the Previously Selected Index */ SelectIndex = getdropdown.options.selectedIndex; /* Contains the Currently Selected Index */ if ((PreviousSelectIndex == (getdropdown.options.length - 1)) && (SelectIndex != (getdropdown.options.length - 1))&&(SelectChange != 'MANUAL_CLICK')) /* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */ { getdropdown[(getdropdown.options.length - 1)].selected=true; PreviousSelectIndex = SelectIndex; SelectIndex = getdropdown.options.selectedIndex; SelectChange = 'MANUAL_CLICK'; /* Indicates that the Change in dropdown selected value was due to a Manual Click */ } } function fnKeyPressHandler(getdropdown) { if(getdropdown.options.length != 0) /*if dropdown is not empty*/ if (getdropdown.options.selectedIndex == (getdropdown.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<(getdropdown.options.length-1);i++) { var ReadOnlyString = getdropdown[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 */ function fnLeftToRight(getdropdown) { getdropdown.style.direction = "ltr"; } function fnRightToLeft(getdropdown) { getdropdown.style.direction = "rtl"; } function fnDelete(getdropdown) { if(getdropdown.options.length != 0) /*if dropdown is not empty*/ if (getdropdown.options.selectedIndex == (getdropdown.options.length - 1)) /*if option the Editable field i.e. the LAST option */ { getdropdown.options[getdropdown.options.selectedIndex].text = ''; } } </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" style="width:150px;" onKeyDown="if(window.event.keyCode == 37){fnLeftToRight(this.form.lstDropDown);}if(window.event.keyCode == 39){fnRightToLeft(this.form.lstDropDown);}if(window.event.keyCode == 46){fnDelete(this.form.lstDropDown);}if(window.event.keyCode == 8 || window.event.keyCode==127){window.event.keyCode = '';return true;}if(window.event.keyCode == 9){fnLeftToRight(this.form.lstDropDown);}" onKeyUp="return false" onKeyPress = "fnKeyPressHandler(this.form.lstDropDown)" onChange="fnChangeHandler(this.form.lstDropDown)"> <OPTION value="" selected></OPTION> <option>Subrata</option> <option>Chakrabarty</option> <option>Tiger</option> <option>Infosys</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

--