In - Các mục chọn được canh lề [mới cập nhật] - JavaScriptBank.com

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ề [mới cập nhật]
URL: https://www.javascriptbank.com/editable-dropdown-updated.html

Các mục chọn được canh lề [mới cập nhật] © JavaScriptBank.com Hiệu ứng tạo ra các dropdown menu với những tùy chọn được canh lề khác nhau.

JavaScript

<SCRIPT LANGUAGE="JavaScript">/*------------------------------------------------ Variables requiredfor fnChangeHandler_First() & fnKeyPressHandler_First() forEditable Dropdowns -------------------------- Subrata Chakrabarty3.Jan.2003 */ var PreviousSelectIndex_First = 0; /* Contains thePreviously Selected Index */ var SelectIndex_First = 0; /* Contains theCurrently Selected Index */ var SelectChange_First = 'MANUAL_CLICK'; /*Indicates whether Change in dropdown selected value */ /* was due to aManual Click */ /* or due to System properties of dropdown *//*------------------------------------------------ Functions requiredfor Editable Dropdowns -------------------------- Subrata Chakrabarty3.Jan.2003 */ function fnChangeHandler_First(getdropdown) {PreviousSelectIndex_First = SelectIndex_First; /* Contains thePreviously Selected Index */ SelectIndex_First =getdropdown.options.selectedIndex; /* Contains the Currently SelectedIndex */ if ((PreviousSelectIndex_First == (0)) &&(SelectIndex_First != (0))&&(SelectChange_First !='MANUAL_CLICK')) /* To Set value of Index variables - SubrataChakrabarty 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 aManual Click */ } } function fnKeyPressHandler_First(getdropdown) {if(getdropdown.options.length != 0) /*if dropdown is not empty*/ if(getdropdown.options.selectedIndex == (0)) /*if option the Editablefield i.e. the FIRST option */ { var EditString =EditMe_First.innerText; /* Contents of Editable Option */ if(EditString == "--?--") /* On backspace on default value of Editableoption make Editable option Null */ EditString = ""; if((window.event.keyCode==8 || window.event.keyCode==127)) /* To handlebackspace - Subrata Chakrabarty 3.Jan.2003 */ { EditString =EditString.substring(0,EditString.length-1); /* Decrease length ofstring by one from right */ SelectChange_First = 'MANUAL_CLICK'; /*Indicates that the Change in dropdown selected value was due to aManual Click */ } /* Check for allowable Characters */ /* The variouscharacters allowable for entry into Editable option.. may be customizedby minor modifications in the code (if condition below) (you need toknow 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 handleaddition of a character - Subrata Chakrabarty 3.Jan.2003 */ {EditString+=String.fromCharCode(window.event.keyCode); /*ConcatenateEnter character to Editable string*/ /* The following portion handlesthe "automatic Jump" bug*/ /* The "automatic Jump" bug (Description):If a alphabet is entered (while editing) ...which is contained as afirst character in one of the read-only options ..the focusautomatically "jumps" to the read-only option (-- this is a commonproperty 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 indropdown selected value was due to System properties of dropdown */break; } else { SelectChange_First = 'MANUAL_CLICK'; /* Indicates thatthe 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 Editablefield i.e. the FIRST option */ {getdropdown.options[getdropdown.options.selectedIndex].text = ''; }}</SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->

HTML

<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 = '';returntrue;}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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->