能编辑的 html 选择框 select

转载 2011年01月25日 10:37:00

<textarea cols="50" rows="15" name="code" class="xhtml">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; New Document &lt;/title&gt; &lt;meta name="Generator" content="EditPlus"&gt; &lt;meta name="Author" content=""&gt; &lt;meta name="Keywords" content=""&gt; &lt;meta name="Description" content=""&gt; &lt;/head&gt; &lt;body&gt; &lt;input class="Snput" Data="1 test,2 test,3 test,4 test" name="input1111.uuuuu" &gt; &lt;input name="input2222.kkkkk" &gt; &lt;mce:script language="JavaScript"&gt;&lt;!-- window.onload = function(){ var _objs=document.getElementsByTagName("input"); for (i=0;i&lt;_objs.length ;i++ ){ if (_objs[i].className=="Snput"&amp;&amp;_objs[i].name!=""){ _objs[i].id=_objs[i].name; if(_objs[i].addEventListener){ _objs[i].addEventListener("focus",onfocusFn,false); }else{ _objs[i].attachEvent("onfocus",function(){onfocusFn(event.srcElement.id);}); _objs[i].attachEvent("onblur",function(){onblurFn(event.srcElement.id);}); } if(!document.getElementById("Snput"+_objs[i].id)){ var varTempNode=document.createElement("select"); varTempNode.id="Snput"+_objs[i].id; varTempNode.style.position="absolute"; varTempNode.style.display="none"; varTempNode.multiple=true; varTempNode.style.top=_objs[i].offsetTop+_objs[i].offsetHeight+1; varTempNode.style.left=_objs[i].offsetLeft; varTempNode.style.width=_objs[i].offsetWidth; if(varTempNode.addEventListener){ varTempNode.addEventListener("focus",onfocusFn,false); }else{ varTempNode.attachEvent("onfocus",function(){onfocusFn(event.srcElement.id);}); varTempNode.attachEvent("onblur",function(){onblurFn(event.srcElement.id);}); varTempNode.attachEvent("onchange",function(){onchangeFn(event.srcElement.id);}); } if (_objs[i].Data){ for (j=0;j&lt;_objs[i].Data.split(",").length ;j++ ){ varTempNode.options[j] = new Option(_objs[i].Data.split(",")[j]); } document.body.appendChild(varTempNode); varTempNode=null; } } if(!document.getElementById("InputSnput"+_objs[i].id)){ var varTempNodeInput=document.createElement("input"); varTempNodeInput.style.display="none"; varTempNodeInput.id="InputSnput"+_objs[i].id; document.body.appendChild(varTempNodeInput); varTempNodeInput=null; } } } } function onfocusFn(id){ var obj=document.getElementById(id); if (obj.id.substring(0,5)!="Snput"){ obj=document.getElementById("Snput"+id); } if (obj){ obj.style.display=""; } } function onblurFn(id){ if (id.substring(0,5)!="Snput"){ var obj=document.getElementById(id); var obj2=document.getElementById("Snput"+id); }else{ var obj=document.getElementById(id.substring(5,id.length)); var obj2=document.getElementById(id); } if (document.activeElement.id!=obj.id&amp;&amp;document.activeElement.id!=obj2.id){ obj2.style.display="none"; } } function onchangeFn(id){ if (id.substring(0,5)!="Snput"){ var obj=document.getElementById(id); var obj2=document.getElementById("Snput"+id); var obj3=document.getElementById("InputSnput"+id); }else{ var obj3=document.getElementById("InputSnput"+id.substring(5,id.length)); var obj=document.getElementById(id.substring(5,id.length)); var obj2=document.getElementById(id); } obj3.value=obj2.value; obj.value=obj2.options[obj2.selectedIndex].text; obj2.style.display='none'; } // --&gt;&lt;/mce:script&gt; &lt;/body&gt; &lt;/html&gt; </textarea>

 

select选择框变得可以输入、编辑

个件盒箱双条瓶罐
  • jeefchen
  • jeefchen
  • 2010年09月18日 16:58
  • 10490

JS改变input的value值不触发onchange事件解决方案

方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同:     IE下,当一个HTML元素的属性改变的时候,都...

html select 可输入 可编辑

  • 2014年06月18日 12:00
  • 1KB
  • 下载

html5中select选择框重置问题

html5中select选择框重置问题 [问题点数:40分]             不显示删除回复           显示所有回复            显示星级回复          ...

可编辑的select下拉框

本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果。我们来看下如何使用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:能编辑的 html 选择框 select
举报原因:
原因补充:

(最多只允许输入30个字)