Bencalie及各大侠请进，关于可编辑select的改进

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY>
<p>bbbbbbb<span contentEditable=true>oEvent.srcElement.innerHTML</span>aaaa</p>
<P>
<select id="EditableSelect" style="FONT-SIZE: 36px">
<option selected>可以编辑的select第二版</option>
<option>Bencalie制作</option>
</select> </P>
<P>
<SELECT id = "test2" style="FONT-SIZE:18px"><OPTION 
  selected value=ttttttttt 
 >ttttttttt</OPTION><OPTION 
  value=tttttttttttttttttt>ttttttttt</OPTION><OPTION 
  value=sssssssssssssss>sssssssss</OPTION><OPTION 
  value=zzzzzzzzzzzzz>zzzzzzzz</OPTION><OPTION 
value=""></OPTION></SELECT></P>
</BODY>
</HTML>
<script language = "javascript">
var objCurrentSelect;
setEditAble(document.all.EditableSelect);
setEditAble(document.all.test2);
//document.onkeydown=function(){alert(window.event.srcElement.id)}
//document.all("EditableSelect_Input").onkeydown =function(){alert("")}
function getTop(obj){
var objTemp = obj;
var intTop = objTemp.offsetTop;
while(objTemp = objTemp.offsetParent){//not null为true
intTop+=objTemp.offsetTop;
}
return  intTop;
}function getLeft(obj){
var objTemp = obj;
var intLeft = objTemp.offsetLeft;
while(objTemp = objTemp.offsetParent){//not null为true
intLeft+=objTemp.offsetLeft;
}
return  intLeft;
}
function setEditAble(objSelect){
var oNewItem=document.createElement("OBJECT");
document.body.insertBefore(oNewItem);
var a = getInputObject(objSelect);
oNewItem.outerHTML=a;
layoutInput(objSelect);
oNewItem = document.all(objSelect.id + "_Input");
oNewItem.data = getData(objSelect);
document.onkeydown=function(){alert(window.event.srcElement.id);}
objSelect.onchange=function(){doChange(objSelect);}
objSelect.onresize = function(){layoutInput(objSelect);}
objSelect.onmove = function(){layoutInput(objSelect);}
return;
}
function getInputObject(objSelect){
var strResult="<object id='" + objSelect.id + "_Input'";
strResult +=" style='z-index:2;position:absolute;' type='text/x-scriptlet'\n";
strResult += " data=\"" + getData(objSelect) + "\">";
strResult += "</object>";
return strResult;
}
function getData(objSelect){
var strResult;
var selectText = "";
if(objSelect.selectedIndex >= 0){
selectText = objSelect.options[objSelect.selectedIndex].text;
}
strResult = "about:<html><head></head><body leftmargin=0 topmargin=0>";
strResult += "<script language='javascript'>function check(){";
strResult += "if(window.event.keyCode == 13){"
strResult += "parent.acceptInput('" + objSelect.id + "',document.all.myinput.value);}<\/script>"
strResult += "<input id='myinput' value='" + selectText + "' style='border:0;width:100%;height:100%;padding-top:2px;FONT-SIZE:" + objSelect.style.fontSize + "' onkeydown='alert('parent.document.all.test2.id');'>";
onkeydown='parent.addNewOption(document.all.myinput.id,document.all.myinput.value);'>";
strResult += "</body></html>";
alert(strResult);
return strResult;
}
function addNewOption(objSelectID,newValue){
alert("子input回车了");
}function layoutInput(objSelect){
var editable = document.all(objSelect.id + "_Input");
var intTop = getTop(objSelect);
var intLeft = getLeft(objSelect);
editable.style.left=intLeft + 2;
editable.style.top=intTop + 3;
editable.style.width=objSelect.offsetWidth - 21;
editable.style.height=objSelect.offsetHeight - 5;
}function doChange(objSelect){
var editable = document.all(objSelect.id + "_Input");
document.body.insertBefore(editable);
editable.outerHTML = getInputObject(objSelect);
layoutInput(objSelect);
}function addNewOption(objSelect,text,value){
if(arguments.lenght == 2){
return addNewOption(objSelect,text,text);
}else{
objSelect.options[objSelect.length]=new Option(text,value);
return;
}
}
</script>

解决方案 »

  1.   

    Bencalie:
    我还一直都没有发现,你的这个原来不支持5.0呀
    倒
      

  2.   

    我发表一下我的看法：
    一、我希望一个函数搞掂一切
    二、我不明白子符串生成的脚本里，那个object里用parent引用原窗口是否可能。我注意到object如alert(123);类似的脚本可运行，但涉及到对象就不行了。
    三、我不明白类型为text/x-scriptlet的object里，你所用的public_str(arg)可以使用editable.str(arg)来引用，为什么我造了一个public_setXXX(argXXX)却没法使用（我最先是使用该方法来实现object对原select的引用，无法通过，转而使用上帖的方法）。可否介绍text/x-scriptlet的object的技术规范。
    四、大家能否提些建议或成果，实现一个函数搞掂一个select的editable。
    谢谢Bencalie，也谢谢net_lover（两个例子我也看过，可惜现在大米封你的鸡了）。
      

  3.   

    function addNewOption(objSelectID,newValue){
    alert("子input回车了");
    }
    addNewOption应为acceptInput
      

  4.   

    To littlecpu()：老实说，我考虑过封装在一个函数里，但是做的时候scriptlet控件里面使用了about:无法实现我预期的效果，后来就没有深入考虑，在一个函数实现，干脆使用一个页面算了。你既然现在提起，我再尝试一下。
    To falshsoft2000：我在win2000 Adv Server+IE5.0测试过，能正常使用。
      

  5.   

    呵呵.... 我觉得下面这个 "可编辑的下拉列表" 就很不错 , 
    为什么一定要用其他 object 呢? 我记得是在csdn收藏的, 保留了原作者的任何信息. :)(快捷键上稍做改动)
    ---------------------------------------------------------
    <html>
    <head>
    <title>可以编辑的下拉列表 - by WildWind <[email protected]>...</title>
    <script language="JavaScript">
    <!--
    function catch_keydown(sel)
    {
    switch(event.keyCode)
    {
    case 13:
    //Enter;
    sel.options[sel.length] = new Option("","",false,true);
    event.returnValue = false;
    break;
    case 27:
    //Esc;
    alert("text:" + sel.options[sel.selectedIndex].text + ", value:" + sel.options[sel.selectedIndex].value + ";");
    event.returnValue = false;
    break;
    case 46:
    //Delete;
    if(sel.length<=0) break;
    if(confirm("删除当前选项!?")) sel.options[sel.selectedIndex] = null;
    if(sel.length>0) sel.options[0].selected = true;             
    event.returnValue = false;
    break;
    case 8:
    //Back Space;
    var s = sel.options[sel.selectedIndex].text;
    sel.options[sel.selectedIndex].text = s.substr(0,s.length-1);
    event.returnValue = false;
    break;
    }

    }
    function catch_press(sel){
    if(sel.length>0){
    sel.options[sel.selectedIndex].value=sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
    event.returnValue = false;
     }
    }
    //-->
    </script>
    </head><body onload="s1.focus();">
    <h3>操作方法:</h3>
    <p>
    1.按Enter键开始添加输入新的选项...<br>
    2.按Del键删除当前选项...<br>
    3.按Esc键查看当前选项的text和value值...<br>
    4.按BackSpace键删除当前选项的前一个字符...<br>
    </p>
    <h3>测试结果:</h3>
    <p>
    1.IE6.0测试通过...<br>
    </p>
    <br>
    <h3>建议&意见:</h3>
    <p>
    1.大家可以做成htc,将这些函数绑在css上(很简单,不再介绍...)...<br>
    </p>
    <h3>示例:</h3>
    <p>
    <select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>
    </p>
    </body>
    </html>
      

  6.   

    可以一个函数搞掂的可编辑的select第三版
    使用setEditAble(objSelect)本可编辑的select第二版见http://www.csdn.net/develop/Read_Article.asp?Id=15197 作者:csdn.net的bencalie（原作）两个文件
    1. demo.htm
    2. inc.htm
      

  7.   

    //*****************************
    //demo.htm
    //*/<html>
    <head>
    <title></title>
    <script language="javascript">

    window.onload=function()
    {
    setEditAble(littlecpu);
    setEditAble(Select2);
    }

    function setEditAble(objSelect)
    {
    var oNewItem=document.createElement("OBJECT"); 
    document.body.insertBefore(oNewItem);
    var a="<object id=\"" + objSelect.id + "_input\" style=\"z-index:2;position:absolute\" type=\"text/x-scriptlet\" data=\"inc.htm\"></object>";
    oNewItem.outerHTML=a;
    layoutInput(objSelect);

    objSelect.onresize=function()
    {
    layoutInput(objSelect);
    }
    objSelect.onmove = function()
    {
    layoutInput(objSelect);
    }
    document.title = "0";
    doit(objSelect.id);
    }

    function doit(strSelectID)
    {
    document.title = 1 + parseInt(document.title);
    try
    {
    document.all(strSelectID + "_input").setSelect(document.all(strSelectID));
    }
    catch(e)
    {
    setTimeout("doit(\"" + strSelectID + "\")",100);
    }
    }

    function addNewOption(objSelect,value)
    {
    objSelect.options[objSelect.length]=new Option(value,value);
    } //得到obj在页面中的位置
    function getTop(obj)
    {
    var objTemp = obj;
    var intTop = objTemp.offsetTop;
    while(objTemp = objTemp.offsetParent)//not null为true
    {
    intTop+=objTemp.offsetTop;
    }
    return intTop;
    }

    //得到 obj 在页面中的位置
    function getLeft(obj)
    {
    var objTemp = obj;
    var intLeft = objTemp.offsetLeft;
    while(objTemp = objTemp.offsetParent)//not null为true
    {
    intLeft+=objTemp.offsetLeft;
    }
    return  intLeft;
    }

    //定义select所对应的input的外观及位置
    function layoutInput(objSelect)
    {
    var selectInput = document.all(objSelect.id + "_input");
    var intTop = getTop(objSelect);
    var intLeft = getLeft(objSelect);
    selectInput.style.left=intLeft + 2;
    selectInput.style.top=intTop + 3;
    selectInput.style.width=objSelect.offsetWidth - 21;
    selectInput.style.height=objSelect.offsetHeight - 5;
    }
    </script>
    </head>
    <body>
    <P>可以一个函数搞掂的可编辑的select</P>
    <P>使用setEditAble(objSelect)</P>
    <P>&nbsp;</P>
    <P>本可编辑的select第二版见</P>
    <P><A href="http://www.csdn.net/develop/Read_Article.asp?Id=15197">http://www.csdn.net/develop/Read_Article.asp?Id=15197</A>&nbsp;</P>
    <P>作者:csdn.net的bencalie（原作）</P>
    <P>
    &nbsp;
    <span contentEditable="true">此行可回车断行...</span></P>
    <select id="littlecpu" NAME="littlecpu" style="FONT-SIZE:36px">
    <option selected>可以一个函数搞掂的可编辑的select</option>
    <option>LittleCpu制作</option>
    </select>
    <SELECT id="Select2" name="Select2" style="FONT-SIZE:18px">
    <OPTION value="ss" selected>sss</OPTION>
    <OPTION value="aa">ss</OPTION>
    </SELECT>
    </body>
    </html>
      

  8.   

    //*****************************
    //inc.htm
    //*/
    <html>
    <head>
    <script language='javascript'>
    var parentSelect;//所对应的父窗的select
    //将所对应的 select 传入
    function public_setSelect(objSelect)
    {
    parentSelect = objSelect;
    document.all.objText.style.fontSize = objSelect.style.fontSize;
    document.all.objText.value = objSelect.options[objSelect.selectedIndex].text;
    parentSelect.onchange=function()
    {
    public_setValue(parentSelect.options[parentSelect.selectedIndex].text);
    }
    }//设置文本框的值
    function public_setValue(argValue)
    {
    document.all.objText.value = argValue;
    }//得到文本框的值
    function public_getValue()
    {
    return document.all.objText.value;
    }//处理回车
    function dokeydown()
    {
    var strValue=document.all.objText.value.replace(/^\s*/g,'').replace(/\s*$/g,'');
    if(event.keyCode==13 && strValue != '')
    {
    alert(parentSelect.id);
    alert(parentSelect.length);

    for(i=0;i<parentSelect.length;i++)
    if(parentSelect.options[i].text==strValue)
    {
    alert('该选项已经存在！');
    document.all.objText.focus();
    return;
    }
    parent.addNewOption(parentSelect, strValue);
    document.all.objText.value = '';
    }
    }
    </script>
    </head>
    <body leftmargin='0' topmargin='0'>
    <input NAME='objText' id='objText' style='border:0;width:100%;height:100%;padding-top:2px' onkeydown='dokeydown()'>
    </body>
    </html>
      

  9.   

    <OBJECT id=MdcCombo1 classid=clsid:8BD21D30-EC42-11CE-9E0D-00AA006002F3></OBJECT>是这个么？
      

  10.   

    各位大侠：我想知道两个问题
    1：此版本在IE5下是否会有什么问题，特别是如果有frame的情况下
    2：如果将其更名为.jsp是否会有问题，是否还需做什么修改