R
ravi kumar p
I have a requirement as follows
I have a select, in which one of the item is editable. This is maily
to either to enter a value(using key board) or select on of the list
item.
While typing a character in editable item, if any list item is
starting with the pressed character, that particular item is getting
selected. Here I do not want to select that item rather just append
the typed character to editable item.
This auto select behaviour I have overwritten using onChange event.
When a character pressed and if any of the list item is starting with
that character, then assume this as due to key press in the editable
item. So append the character to editable item and set the selection
to editable item.
Could some one help how to write this.
My code is as followed.
<!--******* Start of "HTML" document *******-->
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
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 */
var enteredKey;
/*Will holds the pressed key value*/
function checkkey(e){
if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
enteredKey = e.keyCode;
//alert(e.keyCode);
/*if(keycode == 37){
fnLeftToRight(document.frmName.lstDropDown_First);
}
if(keycode == 39){
fnRightToLeft(document.frmName.lstDropDown_First);
}*/
if(keycode == 46){
fnDelete(document.frmName.lstDropDown_First);
}
if(keycode == 8 || keycode==127){
e.keyCode = '';
return true;
}
if(keycode == 9){
fnLeftToRight(document.frmName.lstDropDown_First);
}
}
/*------------------------------------------------
Functions required for Editable Dropdowns
-------------------------- */
function fnChangeHandler_First()
{
PreviousSelectIndex_First = SelectIndex_First;
/* Contains the Previously Selected Index */
/* Contains the Currently Selected Index */
if ((PreviousSelectIndex_First == (0)) &&(SelectChange_First !=
'MANUAL_CLICK'))
/* To Set value of Index variables*/
{
document.frmName.lstDropDown_First.options[0].selected=true;
document.frmName.lstDropDown_First.options[0].selected=false;
document.frmName.lstDropDown_First.blur();
document.frmName.lstDropDown_First.focus();
PreviousSelectIndex_First = SelectIndex_First;
SelectIndex_First =
document.frmName.lstDropDown_First.options.selectedIndex;
SelectChange_First = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown selected
value was due to a Manual Click */
}
}
function fnKeyPressHandler_First(e)
{
if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
if(document.frmName.lstDropDown_First.options.length != 0)
/*if dropdown is not empty*/
if (document.frmName.lstDropDown_First.options.selectedIndex
== (0))
/*if option the Editable field i.e. the FIRST option */
{
var EditString =
document.frmName.lstDropDown_First.options[0].text;
/* Contents of Editable Option */
if (EditString == "")
/* On backspace on default value of Editable option make
Editable option Null */
EditString = "";
if ((keycode==8 || keycode==127))
/* To handle backspace */
{
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.
*/
if ((keycode==46) || (keycode>47 && keycode<59)||(keycode>62
&& keycode<127) ||(keycode==32))
/* To handle addition of a character */
{
EditString+=String.fromCharCode(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(keycode);
var UpperCaseEnteredChar = EnteredChar;
var LowerCaseEnteredChar = EnteredChar;
if(((keycode)>=97)&&((keycode)<=122))
/*if EnteredChar lowercase*/
UpperCaseEnteredChar = String.fromCharCode(keycode -
32);
/*This is UpperCase*/
if(((keycode)>=65)&&((keycode)<=90))
/*if EnteredChar is UpperCase*/
LowerCaseEnteredChar = String.fromCharCode(keycode +
32);
/*This is lowercase*/
for (i=0;i<(document.frmName.lstDropDown_First.options.length-1);i++)
{ var ReadOnlyString =
document.frmName.lstDropDown_First.options.text;
var FirstChar = ReadOnlyString.substring(0,1);
if((FirstChar == UpperCaseEnteredChar)||(FirstChar ==
LowerCaseEnteredChar))
{
SelectChange_First = 'AUTO_SYSTEM';
alert("selected index is
"+document.frmName.lstDropDown_First.selectedIndex);*/
/* 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 */
document.frmName.lstDropDown_First.options[0].text =
EditString;
document.frmName.lstDropDown_First.options[0].value =
EditString;
return false;
}
return true;
}
/*--------------------------------------------------------------------------------------------
*/
function fnLeftToRight(getdropdown)
{
getdropdown.style.direction = "ltr";
}
function fnRightToLeft(getdropdown)
{
getdropdown.style.direction = "rtl";
}
function fnDelete(getdropdown)
{
if(document.frmName.lstDropDown_First.options.length != 0)
/*if dropdown is not empty*/
if (document.frmName.lstDropDown_First.options.selectedIndex
== (0))
/*if option the Editable field i.e. the FIRST option */
{
document.frmName.lstDropDown_First.options[document.frmName.lstDropDown_First.options.selectedIndex].text
= '';
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="frmName" method="post">
<SELECT name="lstDropDown_First" style="width:150px;"
onKeyDown="javascript:return checkkey(event)" onKeyPress =
"javascript:return fnKeyPressHandler_First(event);"
onChange="fnChangeHandler_First(this.form.lstDropDown_First)">
<OPTION id="EditMe_First" name="EditMe_First" value=""
selected></option>
<option>Sarvan</option>
<option>Patric</option>
<option>Comer</option>
<option>Charls</option>
</SELECT>
<input name="btn" type="Submit" value="Focus">
</FORM>
<!--******* End of "BODY" (of HTML document) *******-->
</BODY>
<!--******* End of "HTML" document *******-->
</HTML>
I have a select, in which one of the item is editable. This is maily
to either to enter a value(using key board) or select on of the list
item.
While typing a character in editable item, if any list item is
starting with the pressed character, that particular item is getting
selected. Here I do not want to select that item rather just append
the typed character to editable item.
This auto select behaviour I have overwritten using onChange event.
When a character pressed and if any of the list item is starting with
that character, then assume this as due to key press in the editable
item. So append the character to editable item and set the selection
to editable item.
Could some one help how to write this.
My code is as followed.
<!--******* Start of "HTML" document *******-->
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
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 */
var enteredKey;
/*Will holds the pressed key value*/
function checkkey(e){
if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
enteredKey = e.keyCode;
//alert(e.keyCode);
/*if(keycode == 37){
fnLeftToRight(document.frmName.lstDropDown_First);
}
if(keycode == 39){
fnRightToLeft(document.frmName.lstDropDown_First);
}*/
if(keycode == 46){
fnDelete(document.frmName.lstDropDown_First);
}
if(keycode == 8 || keycode==127){
e.keyCode = '';
return true;
}
if(keycode == 9){
fnLeftToRight(document.frmName.lstDropDown_First);
}
}
/*------------------------------------------------
Functions required for Editable Dropdowns
-------------------------- */
function fnChangeHandler_First()
{
PreviousSelectIndex_First = SelectIndex_First;
/* Contains the Previously Selected Index */
/* Contains the Currently Selected Index */
if ((PreviousSelectIndex_First == (0)) &&(SelectChange_First !=
'MANUAL_CLICK'))
/* To Set value of Index variables*/
{
document.frmName.lstDropDown_First.options[0].selected=true;
document.frmName.lstDropDown_First.options[0].selected=false;
document.frmName.lstDropDown_First.blur();
document.frmName.lstDropDown_First.focus();
PreviousSelectIndex_First = SelectIndex_First;
SelectIndex_First =
document.frmName.lstDropDown_First.options.selectedIndex;
SelectChange_First = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown selected
value was due to a Manual Click */
}
}
function fnKeyPressHandler_First(e)
{
if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
if(document.frmName.lstDropDown_First.options.length != 0)
/*if dropdown is not empty*/
if (document.frmName.lstDropDown_First.options.selectedIndex
== (0))
/*if option the Editable field i.e. the FIRST option */
{
var EditString =
document.frmName.lstDropDown_First.options[0].text;
/* Contents of Editable Option */
if (EditString == "")
/* On backspace on default value of Editable option make
Editable option Null */
EditString = "";
if ((keycode==8 || keycode==127))
/* To handle backspace */
{
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.
*/
if ((keycode==46) || (keycode>47 && keycode<59)||(keycode>62
&& keycode<127) ||(keycode==32))
/* To handle addition of a character */
{
EditString+=String.fromCharCode(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(keycode);
var UpperCaseEnteredChar = EnteredChar;
var LowerCaseEnteredChar = EnteredChar;
if(((keycode)>=97)&&((keycode)<=122))
/*if EnteredChar lowercase*/
UpperCaseEnteredChar = String.fromCharCode(keycode -
32);
/*This is UpperCase*/
if(((keycode)>=65)&&((keycode)<=90))
/*if EnteredChar is UpperCase*/
LowerCaseEnteredChar = String.fromCharCode(keycode +
32);
/*This is lowercase*/
for (i=0;i<(document.frmName.lstDropDown_First.options.length-1);i++)
{ var ReadOnlyString =
document.frmName.lstDropDown_First.options.text;
var FirstChar = ReadOnlyString.substring(0,1);
if((FirstChar == UpperCaseEnteredChar)||(FirstChar ==
LowerCaseEnteredChar))
{
SelectChange_First = 'AUTO_SYSTEM';
alert("selected index is
"+document.frmName.lstDropDown_First.selectedIndex);*/
/* 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 */
document.frmName.lstDropDown_First.options[0].text =
EditString;
document.frmName.lstDropDown_First.options[0].value =
EditString;
return false;
}
return true;
}
/*--------------------------------------------------------------------------------------------
*/
function fnLeftToRight(getdropdown)
{
getdropdown.style.direction = "ltr";
}
function fnRightToLeft(getdropdown)
{
getdropdown.style.direction = "rtl";
}
function fnDelete(getdropdown)
{
if(document.frmName.lstDropDown_First.options.length != 0)
/*if dropdown is not empty*/
if (document.frmName.lstDropDown_First.options.selectedIndex
== (0))
/*if option the Editable field i.e. the FIRST option */
{
document.frmName.lstDropDown_First.options[document.frmName.lstDropDown_First.options.selectedIndex].text
= '';
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="frmName" method="post">
<SELECT name="lstDropDown_First" style="width:150px;"
onKeyDown="javascript:return checkkey(event)" onKeyPress =
"javascript:return fnKeyPressHandler_First(event);"
onChange="fnChangeHandler_First(this.form.lstDropDown_First)">
<OPTION id="EditMe_First" name="EditMe_First" value=""
selected></option>
<option>Sarvan</option>
<option>Patric</option>
<option>Comer</option>
<option>Charls</option>
</SELECT>
<input name="btn" type="Submit" value="Focus">
</FORM>
<!--******* End of "BODY" (of HTML document) *******-->
</BODY>
<!--******* End of "HTML" document *******-->
</HTML>