改变select元素原来的事件属性,并加快捷键

Js代码  

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE> New Document </TITLE>  
  5.   <META NAME="Generator" CONTENT="EditPlus">  
  6.   <META NAME="Author" CONTENT="">  
  7.   <META NAME="Keywords" CONTENT="">  
  8.   <META NAME="Description" CONTENT="">  
  9.   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  10. <script language="javascript">  
  11.     //将选择的select元素的值追加到输入框中原来数据的后面  
  12. function connectSex(){  
  13.     var sexTextObj=document.form1.sexText;  
  14.     var sexObj=document.form1.sex;  
  15.     var sexValue=sexObj.options[sexObj.selectedIndex].value;  
  16.     if(sexTextObj.value=="" || sexTextObj.value==null){  
  17.         sexTextObj.value=sexValue;  
  18.         }else{  
  19.             sexTextObj.value=sexTextObj.value+"、"+sexValue;  
  20.             }  
  21.     }  
  22.   
  23. //目的在于学习如何屏蔽HTML元素原来已经有的事件，建立新的事件  
  24. function selectEvent(){  
  25.     if(event.keyCode==38 ||event.keyCode==40){  
  26.         //使HTML元素原来默认的事件失效  
  27.           event.returnValue=false;   
  28.             var selectObj=document.form1.sex;  
  29.         var currentIndex=selectObj.selectedIndex;  
  30.           //如果是上键:只是选中  
  31.           if(event.keyCode==38 ){  
  32.             //alert("上键--"+currentIndex);  
  33.             if(currentIndex==0){  
  34.                 return false;  
  35.                 }else{  
  36.                     selectObj.options[currentIndex-1].selected=true;  
  37.                     return;  
  38.                     }             
  39.             }  
  40.            //如果是下键  
  41.           if(event.keyCode==40 ){  
  42.                 //alert("下键--"+currentIndex+"selectObj.options.length:"+selectObj.options.length);  
  43.             if(currentIndex==selectObj.options.length-1){  
  44.                 return false;  
  45.                 }else{  
  46.                     selectObj.options[1].selected=true;  
  47.                     return ;  
  48.                     }             
  49.             }  
  50.         }  
  51.         //如果是空格键，则把选中的内容添加文本域中  
  52.         if(event.keyCode==32){  
  53.             connectSex();  
  54.             }  
  55.     }  
  56.     </script>  
  57.  </HEAD>  
  58.   
  59.  <BODY>  
  60.   <form method="post" name="form1" action="">  
  61.    <input type="text" name="text1" value="text1"/>  
  62.    <input type="text" name="text2" value="text2"/><br/>  
  63.    <select name="sex" onChange="connectSex()" onkeydown="selectEvent()">  
  64.     <option value="girl">女</option>       
  65.     <option value="boy">男</option>  
  66.   </select>  
  67.     <!--Tab键会自动跳过hidden类的控件-->  
  68.    <input type="hidden" name="text3" value="text3">  
  69.    <input type="text" name="sexText" value=""/>  
  70.      
  71.   </form>  
  72.  </BODY>  
  73. </HTML>  

 

select 元素的onmousewheel事件即滚轮转时的事件会改变当前选项,并触发onChange事件,通过onmousewheel="return false;" 来屏蔽此事件.

onkeydown是给select 元素加快捷键,上、下键改变当前的选项，按回车将select的值插入一文本域，代码如下。

Html代码  

  1. <select name="commonNativeLanguage" style="width:150px"  
  2. onkeydown="selectEvent('commonNativeLanguage')"  
  3. onChange="connectTextLangueCommonNative()"  
  4. onmousewheel="return false;">  
时间： 2024-09-11 04:47:37

改变select元素原来的事件属性,并加快捷键的相关文章

JavaScript改变HTML元素的样式改变CSS及元素属性_javascript技巧

改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: 复制代码 代码如下: document.getElementById(id).style.property=new style <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> JS改变

jQuery为动态生成的select元素添加事件的方法_jquery

项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelect =""; 2.在js中写好获取服务端数据的代码 function genVoucherGroupSelect(rowID){ return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).pa

HTML4.0事件属性

窗口事件 (Window Events) 仅在 body 和 frameset 元素中有效. 属性 值 描述 onload 脚本 当文档被载入时执行脚本 onunload 脚本 当文档被卸下时执行脚本 表单元素事件 (Form Element Events) 仅在表单元素中有效. 属性 值 描述 onchange 脚本 当元素改变时执行脚本 onsubmit 脚本 当表单被提交时执行脚本 onreset 脚本 当表单被重置时执行脚本 onselect 脚本 当元素被选取时执行脚本 onblur

HTML高级教程：学习HTML 4.0事件属性

高级|教程 HTML 4.0的新特性之一是使HTML事件触发浏览器中的行为,比方说当用户点击一个HTML元素时启动一段JavaScript.以下就是可被插入HTML标签以定义事件行为的一系列属性. 假如你希望学习如何使用这些事件进行编程,那么你应该学习我们的JavaScript教程和DHTML教程. 窗口事件 (Window Events) 仅在body和frameset元素中有效. 属性 值 描述 onload 脚本 当文档被载入时执行脚本 onunload 脚本 当文档被卸下时执行脚本 表单

XHTML初学者教程：XHTML 事件属性

xhtml|初学|教程 HTML 4.0的新特性之一是使HTML事件触发浏览器中的行为,比方说当用户点击一个HTML元素时启动一段JavaScript.以下就是可被插入HTML标签以定义事件行为的一系列属性. 假如你希望学习如何使用这些事件进行编程,那么你应该学习我们的JavaScript教程和DHTML教程. 窗口事件 (Window Events) 仅在body和frameset元素中有效. 属性 值 描述 onload 脚本 当文档被载入时执行脚本 onunload 脚本 当文档被卸下时执

HTML5中事件属性简介

局事件属性 HTML 4 增加了通过事件触发浏览器中行为的能力,比如当用户点击某个元素时启动一段 JavaScript. 如果需要学习更多有关使用这些事件进行编程的内容,请学习我们的 JavaScript 教程 和 DHTML 教程. 下面的表格列出了可插入 HTML 5 元素中以定义事件行为的标准事件属性. Window 事件属性 - Window Event Attributes 表单事件 - Form Events 键盘事件 - Keybord Events 鼠标事件 - Mouse Ev

js 获取当前select元素值的代码_表单特效

1.如果 select 元素下的所有 option 元素均没有指定 selected 属性,会默认选中第一个. 2.可以通过 select.selectedIndex 获取到选中的 option 元素的索引. 3.可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素. 4.option 元素 <option selected="selected" value="value3">text3&l

JavaScript 事件属性绑定带参数的函数_javascript技巧

例如不能采用这种调用方式:element.onclick = test();element.onclick = test(arg1,arg2);只能通过element.onclick = function(){ ... };或者element.onclick = test这种方式来实现,所以无法给函数传递参数.参考了大量的网上资料,解决这个问题的方式,以代码为例,如下所示: 复制代码 代码如下: function Handler() { }; Handler.prototype = { /* *

走进HTML5入门到精通：HTML5标准属性和事件属性

HTML 5 标准属性 所有 HTML 5 标签均支持下面列出的属性,仅有少数例外. HTML 5 标准属性 NEW:HTML 5 中新的标准属性. 注释:HTML 4.01 不再支持 accesskey 属性: HTML 5 事件属性 标准事件属性 HTML 4 增加了通过事件触发浏览器中行为的能力,比如当用户点击某个元素时启动一段 http://www.aliyun.com/zixun/aggregation/33906.html">JavaScript. 如果需要学习更多有关使用这些