Is there a way to have text in a drop box......

[slackerbabe]

be able to be copied/pasted?

I'm not speaking of textarea or scroll boxes...

I have a list of words in a drop box, and would like, when a word is selected, to be able to right click for it to be copied/pasted

I've been trying to answer this by:

making the drop boxes
Google
viewing sites w/drop boxes and trying, w/mouse, to see if any copy/paste...

I would say the answer is no...but I don't know everything ;)

If no, I'm open to any ideas on how I could implement this......

Thanks in advance for any help

Sorry, I would also like to know if my login name can be changed to my name? I didn't see it in edit....thanks

Kendra

[matting]

Here is editableSelectBox.js....

//EDITABLE HTML SELECT BOX SCRIPT

/*
Include this script to your web page.
example: <SCRIPT language="javascript" type="text/javascript" src="editableSelectBox.js"></SCRIPT>

Put event attributes onClick="beginEditing(this);" and onBlur="finishEditing();" to your select box.
example: <SELECT name="foo" id="foo" onClick="beginEditing(this);" onBlur="finishEditing();">...</SELECT>

When editing is finished option values are overwriten with text values, so only text of the selected option will be posted.
*/


var o = null;
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
var selectedIndex = 0;
var pointer = "|";
var blinkDelay = null;
var pos = 0;

function beginEditing(menu) {
finishEditing();
if(menu.selectedIndex > -1 && menu[menu.selectedIndex].value != "read-only") {
o = new Object();
o.editOption = menu[menu.selectedIndex];
o.editOption.old = o.editOption.text;
o.editOption.text += pointer;
selectedIndex = menu.selectedIndex;
if(navigator.userAgent.toLowerCase().indexOf("msie") != -1) //user is using IE
document.onkeydown = keyPressHandler;
else
document.onkeypress = keyPressHandler;
pos = o.editOption.text.indexOf(pointer);
blinkDelay = setTimeout("blinkPointer()", 300);
}

function keyPressHandler(e){
stopBlinking();
menu.selectedIndex = selectedIndex;
var option = o.editOption;
var keyCode = (window.event) ? event.keyCode : e.keyCode;
var specialKey = true;
if(keyCode == 0){
keyCode = (isNN) ? e.which : event.keyCode;
specialKey = false;
}

if(keyCode == 16)
return false;
else if(keyCode == 116 && specialKey){
finishEditing();
window.location.reload(true);
}
else if(keyCode == 8)
option.text = option.text.substring(0,option.text.indexOf(pointer)-1) + pointer + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
else if(keyCode == 46 && option.text.indexOf(pointer) < option.text.length)
option.text = option.text.substring(0,option.text.indexOf(pointer)) + pointer + option.text.substring(option.text.indexOf(pointer)+2,option.text.length);
else if (keyCode == 13)
finishEditing();
else if(keyCode == 37 && option.text.indexOf(pointer) > 0 && specialKey)
option.text = option.text.substring(0,option.text.indexOf(pointer)-1) + pointer + option.text.substring(option.text.indexOf(pointer)-1,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
else if(keyCode == 39 && option.text.indexOf(pointer) < option.text.length && specialKey)
option.text = option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.indexOf(pointer)+2) + pointer + option.text.substring(option.text.indexOf(pointer)+2,option.text.length);
else if(((keyCode == 37 && option.text.indexOf(pointer) <= 0) || (keyCode == 39 && option.text.indexOf(pointer) >= option.text.length) || keyCode == 40 || keyCode == 38 || keyCode == 20 || keyCode == 33 || keyCode == 34) && specialKey){
//do nothing
}else if(keyCode == 36 && specialKey)
option.text = pointer + option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
else if(keyCode == 35 && specialKey)
option.text = option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length) + pointer;
else
option.text = option.text.substring(0,option.text.indexOf(pointer)) + String.fromCharCode(keyCode) + pointer + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);

pos = option.text.indexOf(pointer);
blinkDelay = setTimeout("blinkPointer()", 300);

if(!((keyCode >= 48 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 122)))
return false;

}

}

function blinkPointer(){
if(o == null)
return;
pos = o.editOption.text.indexOf(pointer);
o.editOption.text = o.editOption.text = o.editOption.text.substring(0,o.editOption.text.indexOf(pointer)) + "." + o.editOption.text.substring(o.editOption.text.indexOf(pointer)+1,o.editOption.text.length)
blinkDelay = setTimeout("blinkPointer2()", 300);
}

function blinkPointer2(){
o.editOption.text = o.editOption.text = o.editOption.text.substring(0,pos) + pointer + o.editOption.text.substring(pos+1,o.editOption.text.length)
blinkDelay = setTimeout("blinkPointer()", 300);
}

function stopBlinking(){
clearTimeout(blinkDelay);
if(o.editOption.text.charAt(pos) != pointer)
o.editOption.text = o.editOption.text = o.editOption.text.substring(0,pos) + pointer + o.editOption.text.substring(pos+1,o.editOption.text.length)
}

function finishEditing() {
if(o != null) {
stopBlinking();
option = o.editOption;
option.text = option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);

option.value = option.text;
document.onkeypress = null;
document.onkeydown = null;
o = null;
}
}


example usage...
<SCRIPT language="javascript" type="text/javascript" src="editableSelectBox.js">

</SCRIPT>

<form>
<select name="test" size="5" onClick="beginEditing(this);" onBlur="finishEditing();" style="width:250px;">
<option value="test">test 01</option>
<option value="test">test 02</option>
</select>
</form>

Lots of optional properties there..

Hope it works for you.. oh the answer is YES! not no! Happy?


Matt

[slackerbabe]

Matt, Yes! Thanks!....I'm happy there is a way to do this, I just don't know anything about Javascript...but, I do understand your directions on editing (ty for the examples)..and where the form code would go on my page...my problems:


<SCRIPT language="javascript" type="text/javascript" src="editableSelectBox.js"></SCRIPT>

Do I put the above in the HEAD section? before the ending </head>? Then do I put the code inside the tags? like below:

<SCRIPT language="javascript" type="text/javascript" src="editableSelectBox.js">
---ALL CODE FROM FIRST BOX HERE?---
</SCRIPT>
----------------------
I also noticed you repeated the above in the second box, 'usage example', is that just for example? or do i include that too just as you have it? I'm assuming all the SECOND box code goes in <body>....
---

I've never worked with JS, only html/css, and I copied your code, (where i thought it should be on page), in HTML-kit...i'm doing it wrong though, because I see the code when previewing.....

any help would be appreciated...thanks

[orcrist]

nono, you save that code as separate .js file, and call it in action with
<SCRIPT language="javascript" type="text/javascript" src="editableSelectBox.js">

</SCRIPT>
as i understand this, that line should go right before your form.

[slackerbabe]

ohhh, you treat it basically as you would a style sheet.....okay, I feel dumb :) ......But I understand it now!....thank you orcrist