Tweet
Editable Dropdowns
I am looking for a way to make a Dropdown box editable by the user. I found some code but it does not allow the user to just click on the box and begin editing the content. It currently allows the user to select one of the selected indexes and then begin to edit. Can anyone help me with this. Here is the code that I have:
Thanks in advance. This code may help someone else as well.
<head>
<script LANGUAGE="JavaScript" >
<!-- Begin
var o = null;
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
function beginEditing(menu){
finish();
if(menu[menu.selectedIndex].value == "editable"){
o = new Object();
o.editOption = menu[menu.selectedIndex];
o.editOption.old = o.editOption.text;
o.editOption.text = "";
menu.blur();
window.focus();
document.onkeypress = keyPressHandler;
document.onkeydown = keyDownHandler;
}
function keyDownHandler(e){
var keyCode = (isNN)?e.which:event.keyCode;
return (keyCode!=8 || keyPressHandler(e));
}
function keyPressHandler(e){
var option = o.editOption;
var keyCode = (isNN)?e.which:event.keyCode;
if(keyCode==8 || keyCode==37)
option.text = option.text.substring(0,option.text.length-2)+" ";
else if(keyCode==13){
finish();
} else if(keyCode!=0)
option.text = option.text.substring(0,option.text.length-1) + String.fromCharCode(keyCode) + " ";
return false;
}
function finish(){
if(o!=null){
option = o.editOption;
if(option.text.length > 1)
option.text = option.text.substring(0,option.text.length-1);
else
option.text = option.old;
document.onkeypress = null;
document.onkeydown = null;
o = null;
}
}
}
function getvalue()
{
//alert("hi");
editable ="cbodetails" ;
alert(document.frmMisload.elements[editable].options[document.frmMisload.elements[editable].selectedIndex].text);
document.frmMisload.txtoption.value = document.frmMisload.cbodetails.options[document.frmMisload.cbodetails.selectedIndex].text;
}
//-->
</script>
<title>New Page </title>
</head>
<body bgcolor="#FFFFFF" text="#003399" link="#CC9900" vlink="#666699" alink="#CC3399">
<form name="frmMisload" action="drop.htm" method="post">
<select name="cbodetails" onChange="beginEditing(this);" size=1>
<option></option>
<option value="editable">edit</option>
<option value="choice0">choice0</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
</select>
<input type="hidden" name="txtoption">
<input type="submit" value="go" onclick="return getvalue();">
</form>
</body>
</html>
Thanks in advance. This code may help someone else as well.
<head>
<script LANGUAGE="JavaScript" >
<!-- Begin
var o = null;
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
function beginEditing(menu){
finish();
if(menu[menu.selectedIndex].value == "editable"){
o = new Object();
o.editOption = menu[menu.selectedIndex];
o.editOption.old = o.editOption.text;
o.editOption.text = "";
menu.blur();
window.focus();
document.onkeypress = keyPressHandler;
document.onkeydown = keyDownHandler;
}
function keyDownHandler(e){
var keyCode = (isNN)?e.which:event.keyCode;
return (keyCode!=8 || keyPressHandler(e));
}
function keyPressHandler(e){
var option = o.editOption;
var keyCode = (isNN)?e.which:event.keyCode;
if(keyCode==8 || keyCode==37)
option.text = option.text.substring(0,option.text.length-2)+" ";
else if(keyCode==13){
finish();
} else if(keyCode!=0)
option.text = option.text.substring(0,option.text.length-1) + String.fromCharCode(keyCode) + " ";
return false;
}
function finish(){
if(o!=null){
option = o.editOption;
if(option.text.length > 1)
option.text = option.text.substring(0,option.text.length-1);
else
option.text = option.old;
document.onkeypress = null;
document.onkeydown = null;
o = null;
}
}
}
function getvalue()
{
//alert("hi");
editable ="cbodetails" ;
alert(document.frmMisload.elements[editable].options[document.frmMisload.elements[editable].selectedIndex].text);
document.frmMisload.txtoption.value = document.frmMisload.cbodetails.options[document.frmMisload.cbodetails.selectedIndex].text;
}
//-->
</script>
<title>New Page </title>
</head>
<body bgcolor="#FFFFFF" text="#003399" link="#CC9900" vlink="#666699" alink="#CC3399">
<form name="frmMisload" action="drop.htm" method="post">
<select name="cbodetails" onChange="beginEditing(this);" size=1>
<option></option>
<option value="editable">edit</option>
<option value="choice0">choice0</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
</select>
<input type="hidden" name="txtoption">
<input type="submit" value="go" onclick="return getvalue();">
</form>
</body>
</html>
Comment