萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 腳本Html教程 >> 為Html的Select加一個提示語和輸入方法

為Html的Select加一個提示語和輸入方法

 <HTML>

  <Head>

  <SCRIPT LANGUAGE="JavaScript">

  <!--

  //定義 select 原值

  var oldValue,oldText;

  //select下拉框的onkeydown事件,修改下拉框的值

  function catch_keydown(sel)

  {

  switch(event.keyCode)

  {

  case 13: //回車鍵

  event.returnValue = false;

  break;

  case 27: //Esc鍵

  sel.options[sel.selectedIndex].text = oldText;

  sel.options[sel.selectedIndex].value = oldValue;

  event.returnValue = false;

  break;

  case 8: //空格健

  var s = sel.options[sel.selectedIndex].text;

  s = s.substr(0,s.length-1);

  if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text)

  {

  sel.options[sel.selectedIndex].value=s;

  sel.options[sel.selectedIndex].text=s;

  }

  event.returnValue = false;

  break;

  }

  if (!event.returnValue && sel.onchange)

  sel.onchange(sel)

  }

  //select下拉框的onkeypress事件,修改下拉框的值

  function catch_press(sel){

  if(sel.selectedIndex>=0){

  var s = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);

  if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text)

  {

  sel.options[sel.selectedIndex].value=s;

  sel.options[sel.selectedIndex].text=s;

  }

  event.returnValue = false;

  if (!event.returnValue && sel.onchange)

  sel.onchange(sel)

  }

  }

  //select下拉框的onfocus事件,保存下拉框原來的值

  function catch_focus(sel) {

  oldText = sel.options[sel.selectedIndex].value;

  oldValue = sel.options[sel.selectedIndex].value;

  }

  //恢復select下拉列表當前選中的值

  function LoadSelect(obj,value)

  {

  for (var i=0; i< obj.options.length; i++)

  if (obj.options[i].value == value)

  {

  obj.selectedIndex = i;

  break;

  }

  }

  //select 選擇框鼠標上移時提示選擇的內容

  function selMouseOver(obj)

  {

  with (document.all.div_hint)

  {

  innerText = obj.options[obj.selectedIndex].text;

  if (innerText.length > 0)

  {

  innerText = " " + innerText + " ";

  style.display = "block";

  style.left = event.clientX + 16;

  style.top = event.clientY;

  }

  }

  }

  //select 選擇框鼠標移開時消失

  function selMouseOut(obj)

  {

  with (document.all.div_hint)

  {

  style.display = "none"

  }

  }

  //-->

  </SCRIPT>

  </Head>

  <Body>

  <!--調用-->

  <select style='width:130px;z-index:-1' name='tmpSel' onmouseout=selMouseOut(this) onkeydown=catch_keydown(this) onfocus=catch_focus(this)>

  <option value=''></option>

  </select>

  <!--提示塊-->

  <div id=div_hint ></div>

  </Body>

  </Html>

copyright © 萬盛學電腦網 all rights reserved