Linux中国  设为主页
 收藏本站
 
当前位置: > 首页 ->网站设计 ->HTML/DHTML -> 怎么为Html的Select加提示语
  相关分类： 
AJAX教程
CSS/CSS2
Dreamweaver
Fireworks
Flash
HTML/DHTML
JavaScript
Phososhop
网页制作
  站内搜索： 
热门文章排行
热门文章排行 常用网页播放器代码(06-05)
HTML基础知识：认识http-equiv属性(04-12)
网页设计颜色代码大全(06-05)
HTML语法详细介绍(04-12)
HTML教程-Frame 的其它属性(04-12)
精采文章排行
精采文章排行 浅议Web网页Form表单设计技巧(06-05)
超级实用的几种表单校验效果收集(06-05)
揭开正则表达式的神秘面纱(06-05)
教你制作GBK与Unicode的对照表(06-05)
常用网页播放器代码(06-05)
  ·超级实用的几种表单校验效果收集·揭开正则表达式的神秘面纱·教你制作GBK与Unicode的对照表·常用网页播放器代码·要速度更要灵活，JFCMS系统功能评测·渐飞CMS普及风暴活动公告·SSI技术—SHTML（生成静态时用的最火）·Google官方讲解NOINDEX、NOFOLLOW、NOARC·一个form两个提交按钮,分别提交到两页面

怎么为Html的Select加提示语

作者:Webmaster   来源:Linuxdby.com   点击:   日期:2007-04-12 [收藏] [投稿]

  IE是否经常中毒？推荐您

<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' onmouseover=selMouseOver(this) onmouseout=selMouseOut(this) onkeydown=catch_keydown(this) onkeypress=catch_press(this) onfocus=catch_focus(this)>
<option value=''></option>
</select>

<!--提示块-->
<div id=div_hint style="font-size:12px;color:red;display:none;position:absolute; z-index:2; top:200;background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #9c9c9c solid;filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>
</Body>
</Html>



 如果您对本文有任何疑问或者建议，请到讨论区发表您的意见: >> 论坛入口 <<



上一篇： HTML初学者教程-整个HTML文件   下一篇： HTML语法详细介绍
【文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论】

   相关文章:
·浅议Web网页Form表单设计技巧

   文章评论:(1条)
  
 请留名： 匿名评论   点击查看所有评论 论坛讨论
 

 声明：刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。