WEB中的select 兼输入框

最新推荐文章于 2024-02-29 13:29:37 发布

wenzhoufeng

最新推荐文章于 2024-02-29 13:29:37 发布

阅读量1k

点赞数

分类专栏：浅谈HTML 浅谈script 文章标签： web function border class css table

本文链接：https://blog.csdn.net/wenzhoufeng/article/details/1591635

版权

浅谈HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

浅谈script

5 篇文章 0 订阅

订阅专栏

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>EditSelect</title>
<script>
function isIE(){
a=navigator.appVersion.split(";")
b=a[1].split(" ")
return parseFloat(b[2])
}

if (isIE()<5.5)
{
scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><div id="selecthtml" class="selectcontent">selectáD表</div></div>'
}
else
{
scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">selectáD表</div></div>'
}

document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml

   var redge=document.body.clientWidth-vleft
   var bedge=document.body.clientHeight-vtop

if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}

    if (combo.height==0)
      {
        vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
        vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
      }
      else
      {
         if (htmltable.offsetHeight>combo.height)
          {
            vDiv.style.pixelHeight=combo.height
            vDivHtml.style.pixelHeight=combo.height

            }
           else
           {

              vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
              vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
           }

       }

    vDivHtml.scrollTop=0

    if (redge<vDiv.offsetWidth)
      vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
        else
      vDiv.style.left=vleft-1

   if (bedge<vDiv.offsetHeight)
    //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
    vDiv.style.top=vtop-vDiv.offsetHeight+bedge
         else
      vDiv.style.top=vtop


    vDivHtml.style.width=parseInt(vDiv.style.width)
      vDiv.style.visibility="visible"
}

this.add=function(text,js){
     combo.options[combo.options.length]=text
     combo.oj[combo.oj.length]=js

}

this.clearall=function(){
combo.options=new Array()
}

this.about=function(){

}
}

function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
}

function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
}

document.οnmοusedοwn=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop;

x1=vDiv.offsetLeft
y1=vDiv.offsetTop

x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight

if (mx<x1 || my<y1 || x2<mx || y2<my)
   {
     vDiv.style.visibility='hidden'
   }
}
}</script>

.selectdiv
{
position: absolute;
width:100;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head>

<table border="0" width="100%">
    <tr>
        <td width="151" align="center"><font size="2">可编辑的Select</font></td>
        <td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("支持CSS")
sel1.add("可以通过CSS，修改外形")
sel1.add("突破原来的Select诸多限制")
</script></td>
    </tr>
    <tr>
        <td width="151" align="center"><font size="2">长度可以随意修改<br>可以设置为只读</font></td>
        <td>
        <script>
var sel2=new editselect("select2","20","长度可以随意修改",250,82,1);
sel2.add("这是一个可以编辑的Select")
sel2.add("支持CSS")
sel2.add("可以通过CSS，修改外形")

sel2.add("作者:舜子制作")
sel2.add("MSN:puterjam@msn.com")
</script>
        </td>
    </tr>
    <tr>
        <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td>
        <td>
        <script>
var sel3=new editselect("select3","25","可以遮盖系统Select","",41);
sel3.add("这是一个可以编辑的Select")
sel3.add("支持CSS")
sel3.add("可以通过CSS，修改外形")
sel3.add("突破原来的Select诸多限制")
</script>
        </td>
    </tr>
    <tr>
        <td width="151" align="right">　</td>
        <td><select><option>系统的Select</option></select>　</td>
    </tr>
</table>
</body>

</html>