HTML5新增的表单事件:oninput、onkeyup、oninvalid

最新推荐文章于 2022-05-19 11:15:33 发布

Ryan_鲸落

最新推荐文章于 2022-05-19 11:15:33 发布

阅读量3k

点赞数 1

分类专栏： HTML5 文章标签： html新增表单事件 oninput onkeyup oninvalid

本文链接：https://blog.csdn.net/qq_41999819/article/details/90515108

版权

HTML5 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

HTML5新增的表单事件:oninput、onkeyup、oninvali

1：oninput 监听当前指定元素内容的改变；只要内容改变（添加元素，删除元素），就会触发这个事件

2：onkeyup 键盘弹起时触发，每一个键弹起时都会触发

3：oninvalid：当验证不通过时触发

为了方便大家理解运用，我做了一个简单的案例，供大家参考

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>XPR</title>
</head>
<body>

<from>
<!--autofocus属性：自动获取焦点-->
    用户名： <input type="text" name="username" id="username" autofocus></br>
    手机号：<input type="tel" name="userphoone" id="userphoone" pattern="^1\d{10}&"></br>  //pattern:正则表达式
    <input type="submit" value="提交"></br>
</from>

<!--事件-->
<script>

// oninput：监听当前指定元素内容的改变；只要内容改变（添加元素，删除元素），就会触发这个事件
    document.getElementById("username").oninput=function () {
        console.log("oninput:"+this.value);
    }

    //onkeyup ：键盘弹起时触发，每一个键弹起时都会触发
    document.getElementById("username").onkeyup=function () {
        console.log("onkeyup:"+this.value);
    }

    //  oninvalid：当验证不通过时触发
    document.getElementById("userphoone").oninvalid=function () {
       this.setCustomValidity()  //设置默认的提示信息
    }
</script>
</body>
</html>

Ryan_鲸落

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增的表单事件:oninput、onkeyup、oninvalid

HTML5新增的表单事件:oninput、onkeyup、oninvali1：oninput 监听当前指定元素内容的改变；只要内容改变（添加元素，删除元素），就会触发这个事件2：onkeyup 键盘弹起时触发，每一个键弹起时都会触发3：oninvalid：当验证不通过时触发为了方便大家理解运用，我做了一个简单的案例，供大家参考<!DOCTYPE html><h...
复制链接

扫一扫