为Html的Select加一个提示语和输入方法_脚本HTML教程-查字典教程网
为Html的Select加一个提示语和输入方法
为Html的Select加一个提示语和输入方法
发布时间:2015-05-12 来源:查字典编辑
摘要:

 <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 name='tmpSel' onmouseout=selMouseOut(this) onkeydown=catch_keydown(this) onfocus=catch_focus(this)>

<option value=''></option>

</select>

<!--提示块-->

<div id=div_hint ></div>

</Body>

</Html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新脚本HTML教程学习
    热门脚本HTML教程学习
    网页设计子分类