JavaScript onchange 事件详解与用法
作者:像素猫时间:2026-10-31 06:58:14浏览:69
本文详解 JavaScript 中的 onchange 事件,介绍其在 input、select 和 textarea 等表单元素中的应用。通过具体代码示例,展示如何触发事件执行函数,实现如文本大小写转换及下拉框值获取等功能,帮助开发者掌握表单交互处理技巧。
onchange 事件在表单域内容发生变化时触发,常用于单选框或复选框状态改变后的响应。该事件是必需的,用于指定当内容变更时需执行的 JavaScript 代码。
onchange 属性适用于多种 HTML 元素,包括 <input>、<select> 以及 <textarea>。
onchange 事件基础与适用元素
HTML 中:
<element onchange="SomeJavaScriptCode">
JavaScript 中:
object.onchange=function(){SomeJavaScriptCode};<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后,将小写字母转为大写字母。</p>
</body>
不同的函数实现会产生不同的效果。
onchange 在不同场景下的应用示例
<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="upperCase(this.id)">
</body>
</html>
该事件同样适用于下拉框,无论是选择选项还是触发弹窗形式,均可利用 onchange 进行处理。
Select下拉框onchange事件获取option的value值
<select name="type" onchange="show_sub(this.options[this.options.selectedIndex].value)">
<option value="0">请选择主类别</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<script>
function show_sub(val){
alert(val);
}
</script> 
至此,关于 JavaScript onchange 事件的介绍完毕。如需了解更多相关内容,建议查阅本站过往文章或继续阅读后续章节,感谢大家的支持!
作者最新文章
js-cookie 安装与基础用法:set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件?
2026-11-05 09:37:58
