WEB开发网
开发学院网页设计JavaScript 既是text又是select属性的输入 阅读

既是text又是select属性的输入

　2009-06-30 04:43:00　来源：WEB开发网　　　
核心提示：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
/* CSS Document */
/* for input_dropMenu*/
body{
　  line-height:10px;
　  SCROLLBAR-FACE-COLOR:　　　　 #eeeedd;
　  SCROLLBAR-HIGHLIGHT-COLOR:　　 #eeeedd;
　  SCROLLBAR-SHADOW-COLOR:　　 #666677;
　  SCROLLBAR-3DLIGHT-COLOR:　  #666677;
　  SCROLLBAR-ARROW-COLOR:　　　　  #666677;
　  SCROLLBAR-TRACK-COLOR:　　　　 #efefef;
　  SCROLLBAR-DARKSHADOW-COLOR:　　 #eeeedd;
}
div{
　  font-size:9pt;
}
.dropMenu{
　  overflow:auto;
　  overflow-x:visible;
　  height:100%;
　  border-top:1px solid #aaaabb;
　  border-left:1px solid #aaaabb;
　  border-right:1px solid #666677;
　  border-bottom:2px solid #666677;
　  background-color:#fdfdfd;
　  FILTER:PRogid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=#eeeedd);
　  white-space:nowrap;
}
.dropMenu div{
　  cursor:Default;
　  color:#666677;
　  padding:1px 2px 1px 2px;
　  padding-top:2px;
　  script1:e­xpression(
　　　　　　　  onmouSEOver=function(){
　　　　　　　　　  this.style.background="#0A246A"
　　　　　　　　　  this.style.fontWeight="normal"
　　　　　　　　　  this.style.color="white"
　　　　　　　　　  this.style.paddingLeft="3px"
　　　　　　　  },
　　　　　　　  onmouseout=function(){
　　　　　　　　　  this.style.background="none"
　　　　　　　　　  this.style.fontWeight="normal"
　　　　　　　　　  this.style.color="#666677"
　　　　　　　　　  this.style.paddingLeft="2px"
　　　　　　　  },
　　　　　　　  onclick=function(){
　　　　　　　　　  choose_dropMenu(this.parentNode.style.parent1,this)
　　　　　　　  }
　　　　　  );
}
</style>
</head>
<script language="javaScript">
// Javascript Document
/*
===　  for input_dropMenu　  ===
===　  gotCode 2004-9-21　  ===
*/
function drawShadowDiv(){
　  sDiv =　　 '<div id="shadowDiv" '+
　　　　　  'style="'+
　　　　　  'position:absolute;'+
　　　　　  'left:0px;top:0px;'+
　　　　　  'z-index:1;'+
　　　　　  'background-color:#2C6C85;'+
　　　　　  'layer-background-color:#2C6C85;'+
　　　　　  'display:none;'+
　　　　　  'FILTER:progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=10,finishOpacity=20,startX=0,finishX=0,startY=0,finishY=100);'+
　　　　　  'border:1px solid skyblue;'+
　　　　　  '"></div>'
　　　　　 
　  document.write(sDiv)
}
drawShadowDiv()

function giveItShaow( which , sDiv ,type ){
　  if( type == "show" ){
　　　  sDiv.style.zIndex = which.style.zIndex
　　　  sDiv.style.left = which.offsetLeft + which.parentNode.offsetLeft + 2;
　　　  sDiv.style.top = which.offsetTop + which.parentNode.offsetTop + 3;
　　　  sDiv.style.width = which.offsetWidth ;
　　　  sDiv.style.height = which.offsetHeight ;
　　　  sDiv.style.display = "";
　  }else{
　　　  sDiv.style.display = "none"
　　　  sDiv.style.zIndex = 1
　  }
}
//===显示下拉框===
/*
current_dropMenu　  =　  页面当前下拉框的ID
close_dropMenu　　　  =　  是否可以关闭下拉框
dropMenuGo　　　　　  =　  setTimeout的变量
*/

var current_dropMenu = null
var　 close_dropMenu = true
var　　　 dropMenuGo = null

function show_dropMenu( which ){
　  current_dropMenu = which　　　　　　　　　　　 
　  if( dropMenuGo != null ){
　　　  clearTimeout(dropMenuGo)　　　　　　　　　　　 
　  }
　　　  //info.innerText = which.style.script1
　　　  eval("outSide_"+which.id).style.display = ""
　　　  which.style.display = ""
　　　  which.scrollTop = 0　　　　　　　　　　　　　　　 
　　　  marginTop = parseInt(which.style.marginTop)　　　 
　 
　  if( marginTop < -3 ){　　　　　　　　　　　　　　　 
　　　  which.style.marginTop = marginTop + Math.round(( 0 - marginTop )/3)
　  }else if( marginTop >= -3 && marginTop < 0 ){
　　　  which.style.marginTop = marginTop + 1
　  }
　 
　  if( marginTop >= 0 ){　　　　　　　　　　　　　 
　　　  clearTimeout(dropMenuGo)
　　　  giveItShaow(which,shadowDiv,'show')
　　　  return
　  }
　 
　  dropMenuGo = setTimeout("show_dropMenu( "+which.id+" )",10)　  //
}
//===隐藏下拉框===
function hide_dropMenu(){
　  if( current_dropMenu != null ){　　　　　　　 
　　　  if( close_dropMenu ){
　　　　　  clearTimeout(dropMenuGo)
　　　　　  current_dropMenu.style.display = "none"
　　　　　  eval("outSide_"+current_dropMenu.id).style.display = "none"
　　　　　  current_dropMenu.style.marginTop = current_dropMenu.parentNode.offsetHeight*(-1)
　　　　　  giveItShaow(current_dropMenu,shadowDiv,'hide')
　　　  }
　  }
}

//===选择下拉框的值===
function choose_dropMenu( which , self ){
　　　  close_dropMenu = true
　　　  hide_dropMenu()
　　　  //eval(which).document.body.innerText = self.innerText.substr(0,self.innerText.length-1)
　　　  eval(which).value = self.innerText
}
//===除前后空格===
function trim(str){
　  if( str.substr(0,1)==" "){
　　　  str = str.substr(1)
　  }
　  if( str.substr(str.length-1,1)==" "){
　　　  str = str.substr(0,str.length-2)
　  }
　  return str
}


function replaceFilters( str ){　　　　　　　　　 
　  //str = str.replace(/ /g,"")
　  str = trim(str)
　  str = str.replace(/=/g,':')
　  str = str.replace(/:/g,':"')
　  str = str.replace(/  /g,' ')
　  str = str.replace(/:"\/\//g,'://')
　  str = str.replace(/javascript:"/g,'javascript:')
　  str = str.replace(/,/g,'",')
　  str = str + '"'
　  str = str.replace(/""/g,'"')
　  str = "{" + str + "}"
　  return str
}


/*
type　　　　　　　  =　  变量名称
defaultVariables　  =　  默认的值（不能为空）
*/
function setFilters( type , defaultVariables ){
　  if( filters[type] == undefined ){　　　　　　　 
　　　  if( defaultVariables == undefined ){
　　　　　  defaultVariables = ""
　　　  }
　　　  eval( type + "=defaultVariables" )
　  }else{
　　　  eval( type + "=filters[type]" )
　  }
}


　　　  var getStr , cTmpStr
　　　  function Separate_Str(){
　　　　　  getStr = ""
　　　　　  for ( i = 0; i < cTmpStr.length ; i ++ ){
　　　　　　　  if ( cTmpStr.substr(i,1) == " " ){
　　　　　　　　　  cTmpStr  = cTmpStr.substr(getStr.length+1)
　　　　　　　　　  return  getStr
　　　　　　　  }　　　　　 
　　　　　　　  getStr = getStr + cTmpStr.substr(i,1)
　　　　　  }return getStr
　　　  }


//===drawDropMenu===
/*
iAutoID　  =　  自动编号
id　　　  =　  输入框的值
*/
var iAutoID = 0;
function SS_drawDropMenu( filter ){
　　　  iAutoID++
　  if( filter == undefined ){　　　　　　　　　　　　　　　　　　　　　 
　　　  filters = {}
　  }else{
　　　  eval( "filters=" + replaceFilters( filter ))
　  }
　　　　　  setFilters( "id" , "inputFrame"+iAutoID )
　　　　　  setFilters( "form" , "" )
　　　　　  setFilters( "maxlength" , "" )
　　　　　  setFilters( "cItem" , "没有选项" )
　　　　　  setFilters( "value" , "" )
　　　　　  setFilters( "startColor" , "white" )
　　　　　  setFilters( "endColor" , "#eeeedd" )
　　　　　  setFilters( "onfocus" , "'javascript:;'" )
　　　　　  setFilters( "onblur" , "'javascript:;'" )
　　　　　  setFilters( "onmouseover" , "'javascript:;'" )
　　　　　  setFilters( "onmouseout" , "'javascript:;'" )
　　　　　  setFilters( "onmouseup" , "'javascript:;'" )
　　　　　  setFilters( "onmousedown" , "'javascript:;'" )
　　　　　  setFilters( "onkeyup" , "'javascript:;'" )
　　　　　  setFilters( "onkeydown" , "'javascript:;'" )
　　　　　  setFilters( "onchange" , "'javascript:;'" )
　　　　　  if( form != "" ){
　　　　　　　  parent1 = form+"."+id
　　　　　  }else{
　　　　　　　  parent1 = id
　　　　　  }　　　　　　　　　　　 
　 
　  //---建立下拉框选项的html语句---
　　　  var itemCount　　　　　　　　　　　　　　　　　　　　　　　　　　 //-下拉框选项的循环次数
　　　  var itemHtml = ""　　　　　　　　　　　　　　　　　　　　　　　  //-html语句
　　　  var dropMenuHeight = ""　 
　　　  var inputSize =　  0　　　　　　　　　　　　　　　　　　　　　　　  //-下拉框的高度
　　　　　  itemCount　　 = cItem.split(' ').length
　　　　　  cTmpStr　　　  = cItem
　　　  for( var i = 0 ; i < itemCount ; i++ ){
　　　　　  menuValue = Separate_Str()
　　　　　  itemHtml = itemHtml + '<div>'+menuValue+'</div>\n'
　　　　　  if( menuValue.length > inputSize ){　 
　　　　　　　  inputSize = menuValue.length
　　　　　  }
　　　  }
　　　  if( itemCount < 5){
　　　　　  dropMenuHeight = (17 * itemCount+3)
　　　  }else{
　　　　　  dropMenuHeight = 88
　　　  }
　　　　 setFilters( "size" , inputSize*2 )
　  //---end---
　 
　 
oHtml='<div id="input_dropMenu'+id+'" style="display:inline;height:21px;">\n'+
　　　  '<table  border="0" cellspacing="0" cellpadding="0">\n'+
　　　　　　  '<tr>\n'+
　　　　　　　  '<td style="font-size:9pt;border:1px solid black;border-right:0px;">\n'+
　　　　　　　　　  '<input name="'+id+'" type="text" value="'+value+'" size="'+size+'" maxlength="'+maxlength+'" style="font-size:9pt;border:0px solid black;" '+
　　　　　　　　　　　  ' <td width="16px" style="font-size:9pt;border:1px solid black;border-left:0px;border-right:0px;">\n'+
　　　　　　　　　  '<div style="'+
　　　　　　　　　　　  'font-family:webdings;'+
　　　　　　　　　　　  'overflow:hidden;'+
　　　　　　　　　　　  'height:18;'+
　　　　　　　　　　　  'margin-left:-1px;'+
　　　　　　　　　　　  'border:2px solid outset;'+
　　　　　　　　　　　  'FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='+startColor+',endColorStr='+endColor+');'+
　　　　　　　　　　　  '"'+
　　　　　　　　　　　  ' '+
　　　　　　　　　　　  ' '+
　　　　　　　　　　　  ' '+
　　　　　　　　　　　  ' '+
　　　　　　　　　　　  '>\n'+
　　　　　　　　　　　  '<div style="'+
　　　　　　　　　　　　　　　  'font-size:9pt;'+
　　　　　　　　　　　　　　　  'margin-top:-3px;'+
　　　　　　　　　　　　　　　  'margin-left:1px;'+
　　　　　　　　　　　　　　　  'cursor:hand;'+
　　　　　　　　　　　　　　　  'color:#444444'+
　　　　　　　　　　　　　　　  '"'+
　　　　　　　　　　　　　　　  ' '+
　　　　　　　　　　　　　　　  ' '+
　　　　　　　　　　　　　　　  ' '+
　　　　　　　　　　　　　　　  ' onselectstart="return false"'+
　　　　　　　　　　　  '>6</div>\n'+
　　　　　　　　　  '</div>\n'+
　　　　　　　  '</td>\n'+
　　　　　　  '</tr>\n'+
　　　　　  '<tr>\n'+
　　　　　　　  '<td colspan="2">\n'+
　　　　　　　　　  '<div id="outSide_dropMenu'+id+'"'+
　　　　　　　　　　　  ' class="outSideDropMenu" '+
　　　　　　　　　　　  ' onselectstart="return false"'+
　　　　　　　　　　　  'style="'+
　　　　　　　　　　　　　　　  'display:none;'+
　　　　　　　　　　　　　　　  'position:absolute;'+
　　　　　　　　　　　　　　　  'z-index:21;'+
　　　　　　　　　　　　　　　  'margin-top:-1px;'+
　　　　　　　　　　　　　　　  'height:'+dropMenuHeight+'px;'+
　　　　　　　　　　　　　　　  'width:100%;'+
　　　　　　　　　　　　　　　  'overflow:hidden;'+
　　　　　　　　　　　　　　　  'overflow-x:visible;'+
　　　　　　　　　　　　　　　  'border:0px solid black;'+
　　　　　　　　　  '">\n'+
　　　　　　　　　　　  '<div id="dropMenu'+id+'" class="dropMenu" style="margin-top:e­xpression(this.parentNode.offsetHeight*(-1));parent1:'+parent1+'"   >\n'+
　　　　　　　　　　　　　  itemHtml+
　　　　　　　　　　　  '</div>\n'+
　　　　　　　　　  '</div>\n'+
　　　　　　　  '</td>\n'+
　　　　　　  '</tr>\n'+
　　　  '</table>\n'+
　  '</div>\n'
　  document.write(oHtml)
}
</script>
<body >
<form name="form1" method="post" action="">
  姓名:
  <input name="cName" type="text" id="cName" size="10">
  <br>
  年龄:
  <input name="iAge" type="text" id="iAge" size="10">
  <br>
  职位: <script>SS_drawDropMenu('id=kkk,form=form1,cItem=科员 科长 所长 局长')</script> <script>SS_drawDropMenu('id=kkk2,form=form1,cItem=科员 科长 所长 局长')</script>
<input name="dd" type="button" value="提交" >
</form>
<p> </p></body>
</html>

Tags：既是 text 又是

编辑录入：爽爽　[复制链接] [打 印]
更多精彩
赞助商链接

热点阅读
焦点图片
最新推荐
精彩阅读