当前位置:首页 > 专题管理

JavaScript onchange 事件:表单文本域或选择域发生改变

JavaScript onchange 事件

表单文本域或选择域发生改变时会触发 onchange 事件。

支持该事件的 HTML 标签

<input type="text">, <select>, <textarea>

支持该事件的 JavaScript 对象

fileUpload, select, text, textarea

onchange 实例

下面的例子演示了 select 下拉选择列表,当列表内无合适选择项而让用户自定义选择项的效果:

<html>
<head>

<script type="text/javascript">

function checkArea(x){
  var other_area = document.getElementById( "other_area" );
  if(x.value == "other"){
    other_area.style.display = "inline";
  } else {
    other_area.style.display = "none";
  }
}

</script>

</head>
<body>
<form>
<p>
请选择所在地区:<select name="area" onchange="checkArea(this);">
<option value="bj"> 北京 </option>
<option value="tj"> 天津 </option>
<option value="sh"> 上海 </option>
<option value="other"> 其他 </option>
</select>
</p>
<p id="other_area" style="display:none;">
请填写地区:<input type="text" />
</p>
</form>
</body>
</html>

本章节内容共分 22 部分:

  1. JavaScript 事件
  2. JavaScript onclick 事件:鼠标点击页面某个对象
  3. JavaScript ondblclick 事件:鼠标双击页面某个对象
  4. JavaScript onmousedown 事件:鼠标任何一个按键被按下
  5. JavaScript onmouseup 事件:鼠标任何一个按键被松开
  6. JavaScript onmouseover 事件与 onmouseout 事件:鼠标指针移动到对象上或离开对象
  7. JavaScript onkeydown 事件:键盘上某个按键被按下
  8. JavaScript onkeypress 事件:按下或按住一个键盘按键
  9. JavaScript onkeyup 事件:键盘按键被松开
  10. JavaScript onblur 事件:页面元素失去焦点
  11. JavaScript onfocus 事件:页面元素获得焦点
  12. JavaScript onchange 事件:表单文本域或选择域发生改变
  13. JavaScript onsubmit 事件:表单被提交
  14. JavaScript onreset 事件:表单被重置
  15. JavaScript onload 事件:页面或图像加载完成后
  16. JavaScript onunload 事件:关闭页面或页面被改变为其他页面
  17. JavaScript onerror 事件:加载页面或图像时发生错误
  18. JavaScript onresize 事件:当浏览器窗口或 HTML 对象改变大小
  19. JavaScript onscroll 事件:滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果
  20. JavaScript onselect 事件:文本框中的文本被选中
  21. JavaScript oncopy 事件:文本被复制及利用 oncopy 实现拷贝内容时增加版权信息
  22. JavaScript oncut 事件与 onpaste 事件:文本域文本被剪切或粘贴(禁止粘贴实例)