欢迎来到山村网

为Html的Select加一个提示语和输入方法

2019-03-28 23:45:33浏览:272 来源:山村网   
核心摘要:HTML  Head  SCRIPT LANGUAGE=JavaScript  !--  //定义 select 原值  var oldValue,oldText;  //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>

(责任编辑:豆豆)
下一篇:

让内层将外层撑开

上一篇:

学习css网页布局口诀

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com