<!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>
分享到:
相关推荐
在 JavaScript 事件机制中,事件 handler 是一个函数,它会在事件发生时被调用。事件 handler 可以通过多种方式添加到元素上,例如:直接将 JS 代码写在 HTML 上、定义一个函数、使用 element.onXXX 方式、使用 ...
JavaScript获取HTMLDOM节点元素的方法的总结
使用 JavaScript 属性指定事件处理器的优点是减少了 HTML 和 JavaScript 的混合使用,简洁明了,并且可以根据需要动态创建和修改事件处理器。 事件处理器的代码不必是确定的,可以根据需要动态创建和修改。例如:('...
javascript动态生成页面元素
第6章 JavaScript中的事件与事件处理
JavaScript试题(1. 我们可以在下列哪个HTML元素中放置javascript代码? )
html,javascript元素属性文档
JavaScript中的所有on事件介绍
1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,...
本段代码演示了如何使用JavaScript取消HTML事件的冒泡,即当后代元素的事件被触发时,祖先元素的相同事件也会被触发。代码中,页面包含一个div元素和一个嵌套在其中的span元素,分别设置了单击响应函数。当单击span...
本文实例讲述了JavaScript(js)处理的HTML事件、键盘事件、鼠标事件。分享给大家供大家参考,具体如下: 示例代码: HTML文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
在HTML页面中,除了系统支持的HTML元素外,是否可以建立自定义的HTML元素呢?答案是可以的。 自定义的HTML元素与系统自身的HTML元素地位相同,都可以用document.getElementById来获得,区别在于,自定义的HTML元素...
1.实现JavaScript事件注册;...2.实现JavaScript事件处理函数; 3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
本文将详细介绍 Javascript 中元素位置、大小、鼠标定位操作相关的知识点,包括事件对象、DOM 对象、Style 对象等提供的相关属性和方法。 一、事件对象 Event 事件对象 Event 提供了多个属性来获取鼠标的当前位置...
JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件...
JavaScript中事件冒泡机制示例详析 DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,...
JavaScript的事件;认识事件;JavaScript的事件;JavaScript的事件;JavaScript的事件; 注册和删除事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件;JavaScript的事件; 事件...
第三章 JavaScript事件 第三章 JavaScript事件 第三章 JavaScript事件
实现JavaScript 动态加载事件
JavaScript给事件委托批量添加事件监听详细流程 1.什么是事件委托 事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找...