`

在javascript中如何屏幕HTML元素原有的事件，根据需要建立自己需要的事件

HTMLJavaScript 
阅读更多 
<!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>

 

分享到：
| event.keycode值大全
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics