javascript中的 onchange事件详解

 更新时间:2023年10月11日 11:48:28   作者:许墨の小蝴蝶  
onchange 事件会在域的内容改变时发生,可用于单选框与复选框改变后触发的事件,本文通过示例代码介绍javascript中的 onchange事件,感兴趣的朋友跟随小编一起看看吧

onchange 事件会在域的内容改变时发生,可用于单选框与复选框改变后触发的事件,必需。规定该事件发生时执行的 JavaScript。

onchange 属性可以使用于: <input>, <select>, 和 <textarea>。

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>

函数不同,产生效果不同,

<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>

也可以用于下拉框,选择或者弹窗的形式

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的文章就介绍到这了,更多相关javascript onchange内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ES6中Math对象新增的方法实例详解

    ES6中Math对象新增的方法实例详解

    这篇文章主要介绍了ES6中Math对象新增的方法,结合实例形式详细分析了ES6中Math对象的各种常用数学函数与新增方法相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript实现读取与输出XML文件数据的方法示例

    JavaScript实现读取与输出XML文件数据的方法示例

    这篇文章主要介绍了JavaScript实现读取与输出XML文件数据的方法,结合实例形式分析了JavaScript基于ActiveXObject实现载入、读取与输出xml文件数据的相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • JavaScript中的class类详解

    JavaScript中的class类详解

    JavaScript 中的类(Class)是一种新的语言特性,它让我们可以使用面向对象编程的思想来更加方便地组织和管理代码。在本文中,我们将详细介绍 JavaScript 中的类特性,感兴趣的同学可以借鉴阅读
    2023-05-05
  • 基于javascript实现简单的抽奖系统

    基于javascript实现简单的抽奖系统

    这篇文章主要为大家详细介绍了基于javascript实现简单的抽奖系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript循环遍历的24个方法,你都知道吗

    JavaScript循环遍历的24个方法,你都知道吗

    这篇文章主要给大家介绍了关于JavaScript循环遍历的24个方法,文中对每种方法都给出了详细的实例代码,方便大家理解学习,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • JavaScript创建一个欢迎cookie弹出窗实现代码

    JavaScript创建一个欢迎cookie弹出窗实现代码

    欢迎cookie想必大家早有耳闻,利用cookie记录用户状态信息,当用户再次访问的时候弹出欢迎框,个人感觉还不错吧,希望对你学习cookie有所帮助
    2013-03-03
  • js中的this作用域全解析

    js中的this作用域全解析

    这篇文章主要介绍了js中的this作用域全解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • JavaScript字符串常用的方法

    JavaScript字符串常用的方法

    这篇文章主要介绍了JavaScript字符串常用的方法 的相关资料,需要的朋友可以参考下
    2016-03-03
  • ES6中promise详解及用法实例

    ES6中promise详解及用法实例

    Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大,下面这篇文章主要给大家介绍了关于ES6中promise详解及用法的相关资料,需要的朋友可以参考下
    2022-11-11
  • JS中判断字符串中出现次数最多的字符及出现的次数的简单实例

    JS中判断字符串中出现次数最多的字符及出现的次数的简单实例

    下面小编就为大家带来一篇JS中判断字符串中出现次数最多的字符及出现的次数的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论