PDA

View Full Version : Editable Dropdowns



rhopkins
Jun 18th, 2002, 09:37 PM
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>

jkd
Jun 18th, 2002, 10:05 PM
Take a look at this:
http://www.webfx.eae.net/dhtml/combobox/combobox.htm

:)

rhopkins
Jun 18th, 2002, 10:25 PM
I cannot use third party components at UPS unless they are on our grid of components or software.

dfred
Sep 26th, 2002, 02:33 PM
so let's say i want to use this code with IE instead of Netscape. how should the netscape code change to fit IE? I am not really sure since i use IE only and have not had to deal with Netscape.

Dan