HTML5里面oninput和onchange的区别

最新推荐文章于 2024-06-23 00:55:54 发布

Babamboo

最新推荐文章于 2024-06-23 00:55:54 发布

阅读量1.2k

点赞数

分类专栏： html 文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_45003922/article/details/120551434

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

相同点：1，都是只改变之后会触发的事件
不同点：1，oninput作用于 input 和 textarea 元素，而onchange还作用于 keygen 和 select（下拉框）元素
2，oninput是在值改变的时候立即触发，onchange是在值改变了，并且失去焦点时才触发
所以oninput可以实现的功能是滑杆选择数据，然后实时展示滑杆的值，html代码如下：

<head>
    <script>
        function numChange(){
            var changeVal = document.getElementById("range");
            var showChangeVal = document.getElementById("number");
            showChangeVal.value = changeVal.value;
        }
    </script>
</head>
<body>
    <form action="https://nowjava.com" method="POST">
            <input type="range" id="range" oninput="numChange()" min="0" max="100"></input>
            <input id="number" type="text" size="2" ></input><br><br>
    </form>

效果展示：
在这里插入图片描述
onchange可以实现表单验证功能，比如：登录页面输入账号密码，输入账号然后就向后端发送账号验证是否存在

<head>
    <script>
        function verifyAccount(){
            var account = document.getElementById("account");
            this.$http.get("url").then(res=>{
            	if(res.result==false){
            		alert("账号不存在，请先注册")
            	}
            })
        }
    </script>
</head>
<body>
    <form action="https://nowjava.com" method="POST">
            <input type="text" id="account" onchange="verifyAccount()" ></input>
            <input id="number" type="password" ></input><br><br>
    </form>

Babamboo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5里面oninput和onchange的区别

相同点：1，都是只改变之后会触发的事件不同点：1，oninput作用于 input 和 textarea 元素，而onchange还作用于 keygen 和 select（下拉框）元素2，oninput是在值改变的时候立即触发，onchange是在值改变了，并且失去焦点时才触发所以oninput可以实现的功能是滑杆选择数据，然后实时展示滑杆的值，html代码如下：<head> <script> function numChange(){
复制链接

扫一扫

专栏目录