改变select元素原来的事件属性,并加速捷键 _Web前端

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<script language="javascript">
	//将选择的select元素的值追加到输入框中原来数据的后面
function connectSex(){
	var sexTextObj=document.form1.sexText;
	var sexObj=document.form1.sex;
	var sexValue=sexObj.options[sexObj.selectedIndex].value;
	if(sexTextObj.value=="" || sexTextObj.value==null){
		sexTextObj.value=sexValue;
		}else{
			sexTextObj.value=sexTextObj.value+"、"+sexValue;
			}
	}

//目的在于学习如何屏蔽HTML元素原来已经有的事件，建立新的事件
function selectEvent(){
	if(event.keyCode==38 ||event.keyCode==40){
		//使HTML元素原来默认的事件失效
		  event.returnValue=false; 
			var selectObj=document.form1.sex;
	    var currentIndex=selectObj.selectedIndex;
		  //如果是上键:只是选中
		  if(event.keyCode==38 ){
		  	//alert("上键--"+currentIndex);
		  	if(currentIndex==0){
		  		return false;
		  		}else{
		  			selectObj.options[currentIndex-1].selected=true;
		  			return;
		  			}		  	
		  	}
		   //如果是下键
		  if(event.keyCode==40 ){
		  		//alert("下键--"+currentIndex+"selectObj.options.length:"+selectObj.options.length);
		  	if(currentIndex==selectObj.options.length-1){
		  		return false;
		  		}else{
		  			selectObj.options[1].selected=true;
		  			return ;
		  			}		  	
		  	}
		}
		//如果是空格键，则把选中的内容添加文本域中
		if(event.keyCode==32){
			connectSex();
			}
	}
	</script>
 </HEAD>

 <BODY>
  <form method="post" name="form1" action="">
   <input type="text" name="text1" value="text1"/>
   <input type="text" name="text2" value="text2"/><br/>
   <select name="sex" onChange="connectSex()" onkeydown="selectEvent()">
   	<option value="girl">女</option>   	
   	<option value="boy">男</option>
  </select>
    <!--Tab键会自动跳过hidden类的控件-->
   <input type="hidden" name="text3" value="text3">
   <input type="text" name="sexText" value=""/>
   
  </form>
 </BODY>
</HTML>

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

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

<select name="commonNativeLanguage" style="width:150px"
onkeydown="selectEvent('commonNativeLanguage')"
onChange="connectTextLangueCommonNative()"
onmousewheel="return false;">