Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Các mục chọn được canh lề
URL: https://www.javascriptbank.com/editable-dropdowns.html
Hiệu ứng tạo ra các dropdown menu với những tùy chọn được canh lề khác nhau.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Các mục chọn được canh lề
URL: https://www.javascriptbank.com/editable-dropdowns.html
<style>H1{ COLOR: #000066; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 18px; FONT-WEIGHT: bold}H2{ COLOR: #000066; FONT-FAMILY: Arial,Verdana, Helvetica; FONT-SIZE: 14px; FONT-WEIGHT: bold}H3{ COLOR: #000066; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 18px; FONT-WEIGHT: bold}H4{ COLOR: #000066; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 16px; FONT-WEIGHT: bold}H5{ COLOR: #000066; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 13px; FONT-WEIGHT: bold}H6{ COLOR: #000066; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 10px; FONT-WEIGHT: bold}H7{ COLOR: #000066; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 10px; FONT-WEIGHT: bold}A:link{ COLOR: #3366cc; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 12px; FONT-WEIGHT: bold; TEXT-DECORATION: none}A:visited{ COLOR: #3366cc; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 12px; FONT-WEIGHT: bold; TEXT-DECORATION: none}A:hover{ COLOR: #000066; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 12px; FONT-WEIGHT: bold; TEXT-DECORATION: none}P{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}P.header{ COLOR: #006400; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 14px}P.AuthorNotes{ COLOR: #0000ff; FONT-FAMILY: Times New Roman,verdana, Arial; FONT-STYLE: italic; FONT-SIZE: 14px}DL{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}OL{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}UL{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}LI{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}BLOCKQUOTE{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}SPAN{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}TD{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 11px}TD.cType{ COLOR: #0000f0; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 11px}TD.Text{ COLOR: maroon; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 13px}THEAD{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}TFOOT{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}TH{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}TABLE{ COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 12px}BODY{ BACKGROUND-COLOR: #faf0e6}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="JavaScript">/************* FIXED WIDTH, Left to Right Flow *****************Editable Dropdown in the format:Left Aligned,Fixed Width,Left To Right Flow * use .innerText instead of .Text*****************************************/ /* ---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><script language="JavaScript">/*************** RIGHT TO LEFT FLOW , Fixed Width *************Editable Dropdown in the format:RIGHT Aligned,Fixed Width,RIGHT TO LEFT FLOW (Content flows right to left)* use .innerText instead of .Textadd / includestyle="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.*****************************************/ /* ---Variables required for fnChangeHandler_rtl() & fnKeyPressHandler_rtl() for Editable Dropdowns-- Subrata Chakrabarty 3.Jan.2003 */ var PreviousSelectIndex_rtl = 0; /* Contains the Previously Selected Index */ var SelectIndex_rtl = 0; /* Contains the Currently Selected Index */ var SelectChange_rtl = '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_rtl() { PreviousSelectIndex_rtl = SelectIndex_rtl; /* Contains the Previously Selected Index */ SelectIndex_rtl = document.frmName.lstDropDown_rtl.options.selectedIndex; /* Contains the Currently Selected Index */ if ((PreviousSelectIndex_rtl == (document.frmName.lstDropDown_rtl.options.length - 1)) && (SelectIndex_rtl != (document.frmName.lstDropDown_rtl.options.length - 1))&&(SelectChange_rtl != 'MANUAL_CLICK')) /* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */ { document.frmName.lstDropDown_rtl[(document.frmName.lstDropDown_rtl.options.length - 1)].selected=true; PreviousSelectIndex_rtl = SelectIndex_rtl; SelectIndex_rtl = document.frmName.lstDropDown_rtl.options.selectedIndex; SelectChange_rtl = 'MANUAL_CLICK'; /* Indicates that the Change in dropdown selected value was due to a Manual Click */ } } function fnKeyPressHandler_rtl() { if(document.frmName.lstDropDown_rtl.options.length != 0) /*if dropdown is not empty*/ if (document.frmName.lstDropDown_rtl.options.selectedIndex == (document.frmName.lstDropDown_rtl.options.length - 1)) /*if option the Editable field i.e. the last option */ { var EditString = EditMe_rtl.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_rtl = '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_rtl.options.length-1);i++) { var ReadOnlyString = document.frmName.lstDropDown_rtl[i].innerText; var FirstChar = ReadOnlyString.substring(0,1); if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar)) { SelectChange_rtl = 'AUTO_SYSTEM'; /* Indicates that the Change in dropdown selected value was due to System properties of dropdown */ break; } else { SelectChange_rtl = '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_rtl.innerText = EditString; EditMe_rtl.value = EditString; return false; } return true; } /*-------------------------------------------------------------------------------------------- Subrata Chakrabarty 3.Jan.2003 */</script><script language="JavaScript">/*********** VARIABLE WIDTH *************Editable Dropdown in the format:Left Aligned,VARIABLE WIDTH, Left To Right Flow* USE the ".text" with ".text" (in the HEAD (SCRIPT) of your HTML document)each & every occurence of .text should be replaced with .text*****************************************/ /* ---Variables required for fnChangeHandler_vw() & fnKeyPressHandler_vw() for Editable Dropdowns-- Subrata Chakrabarty 3.Jan.2003 */ var PreviousSelectIndex_vw = 0; /* Contains the Previously Selected Index */ var SelectIndex_vw = 0; /* Contains the Currently Selected Index */ var SelectChange_vw = '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_vw() { PreviousSelectIndex_vw = SelectIndex_vw; /* Contains the Previously Selected Index */ SelectIndex_vw = document.frmName.lstDropDown_vw.options.selectedIndex; /* Contains the Currently Selected Index */ if ((PreviousSelectIndex_vw == (document.frmName.lstDropDown_vw.options.length - 1)) && (SelectIndex_vw != (document.frmName.lstDropDown_vw.options.length - 1))&&(SelectChange_vw != 'MANUAL_CLICK')) /* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */ { document.frmName.lstDropDown_vw[(document.frmName.lstDropDown_vw.options.length - 1)].selected=true; PreviousSelectIndex_vw = SelectIndex_vw; SelectIndex_vw = document.frmName.lstDropDown_vw.options.selectedIndex; SelectChange_vw = 'MANUAL_CLICK'; /* Indicates that the Change in dropdown selected value was due to a Manual Click */ } } function fnKeyPressHandler_vw() { if(document.frmName.lstDropDown_vw.options.length != 0) /*if dropdown is not empty*/ if (document.frmName.lstDropDown_vw.options.selectedIndex == (document.frmName.lstDropDown_vw.options.length - 1)) /*if option the Editable field i.e. the last option */ { var EditString = EditMe_vw.text; /* 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_vw = '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_vw.options.length-1);i++) { var ReadOnlyString = document.frmName.lstDropDown_vw[i].text; var FirstChar = ReadOnlyString.substring(0,1); if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar)) { SelectChange_vw = 'AUTO_SYSTEM'; /* Indicates that the Change in dropdown selected value was due to System properties of dropdown */ break; } else { SelectChange_vw = '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_vw.text = EditString; EditMe_vw.value = EditString; return false; } return true; } /*-------------------------------------------------------------------------------------------- Subrata Chakrabarty 3.Jan.2003 */</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><table border="1" bordercolor="#99cccc" align="center" width="90%"><tbody><tr bgcolor="black" border="0" height="150"><td valign="top" align="center"><table align="center"><tbody><tr bgcolor="black" border="0"><td valign="top" align="center"><font size="2" color="#ccffff" face="helvetica,arial,geneva"><br><b><i>Left Aligned,<br>Fixed Width,<br>Left To Right Flow<br></i></b></font><hr><br></td></tr><tr bgcolor="black" border="0" height="150"><td valign="top" align="center"><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="selected"></option><option>Subrata</option><option>Chakrabarty</option><option>Left Aligned</option><option>Fixed Width</option><option>Left To Right Flow</option><option id="EditMe" name="EditMe" value="" style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">--?--</option></select></td></tr><tr bgcolor="black" border="0"><td valign="top" align="center"><hr><input name="btn1" type="button" value="Alert Edited Value" onclick="alert(EditMe.text);" border="1" style="border-color: rgb(173, 255, 47); border-width: thick; font-weight: bold; font-size: x-small; width: 160px; color: rgb(51, 102, 102); font-style: oblique; font-family: cursive; height: 30px; background-color: gold; font-variant: normal; text-decoration: underline blink;"></td></tr></tbody></table></td><td valign="top" align="center"><table align="center"><tbody><tr bgcolor="black" border="0"><td valign="top" align="center"><font size="2" color="#ccffff" face="helvetica,arial,geneva"><br><b><i>RIGHT Aligned,<br>Fixed Width,<br>RIGHT TO LEFT FLOW <br></i></b></font><hr><br></td></tr><tr bgcolor="black" border="0" height="150"><td valign="top" align="center"><select name="lstDropDown_rtl" style="direction: rtl;" 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_rtl()" onchange="fnChangeHandler_rtl()"><option value="" selected="selected"></option><option>Subrata</option><option>Chakrabarty</option><option>RIGHT Aligned</option><option>Fixed Width</option><option>RIGHT TO LEFT FLOW</option><option id="EditMe_rtl" name="EditMe_rtl" value="" style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">--?--</option></select></td></tr><tr bgcolor="black" border="0"><td valign="top" align="center"><hr><input name="btn2" type="button" value="Alert Edited Value" onclick="alert(EditMe_rtl.text);" border="1" style="border-color: rgb(173, 255, 47); border-width: thick; font-weight: bold; font-size: x-small; width: 160px; color: rgb(51, 102, 102); font-style: oblique; font-family: cursive; height: 30px; background-color: gold; font-variant: normal; text-decoration: underline blink;"></td></tr></tbody></table></td><td valign="top" align="center"><table align="center"><tbody><tr bgcolor="black" border="0"><td valign="top" align="center"><font size="2" color="#ccffff" face="helvetica,arial,geneva"><br><b><i>Left Aligned,<br>VARIABLE WIDTH,<br>Left To Right Flow<br></i></b></font><hr><br></td></tr><tr bgcolor="black" border="0" height="150"><td valign="top" align="center"><select name="lstDropDown_vw" 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_vw()" onchange="fnChangeHandler_vw()"><option value="" selected="selected"></option><option>Subrata</option><option>Chakrabarty</option><option>Left Aligned</option><option>VARIABLE WIDTH</option><option>Left To Right Flow</option><option id="EditMe_vw" name="EditMe_vw" value="" style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">--?--</option></select></td></tr><tr bgcolor="black" border="0"><td valign="top" align="center"><hr><input name="btn3" type="button" value="Alert Edited Value" onclick="alert(EditMe_vw.text);" border="1" style="border-color: rgb(173, 255, 47); border-width: thick; font-weight: bold; font-size: x-small; width: 160px; color: rgb(51, 102, 102); font-style: oblique; font-family: cursive; height: 30px; background-color: gold; font-variant: normal; text-decoration: underline blink;"></td></tr></tbody></table></td></tr></tbody></table><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->