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

末蓝、 2022-01-28 17:43 562阅读 0赞

## 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>
    
        用户名： <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>

发表评论取消回复

表情：

评论列表（有 0 条评论，562人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用HTML5新增的表单元素来增强表单功能？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 1. \`<input type="email">\` 和 \`<input type="url">\` ⭐

怼烎@/ 2023年10月14日 21:57/ 0 赞/ 52 阅读

相关 HTML5 中新增了哪些表单元素？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ HTML5 中新增了的表单元素 ⭐ 写在最后 -------------------- ⭐ 专栏简介

我不是女神ヾ/ 2023年10月14日 15:43/ 0 赞/ 65 阅读

相关 H5--新增表单元素&控件&属性&事件

H5网站重构先简单回顾一下H5新标签：结构性标签、功能性标签结构性标签：负责web上下文件结构的定义功能性标签：功能性内容的表达 ![在这里插入图片描

红太狼/ 2023年10月10日 09:55/ 0 赞/ 64 阅读

相关 HTML5新增表单属性（HTML5）

HTML5新增表单属性（HTML5） <!DOCTYPE html> <html lang="en"> <head> <

梦里梦外;/ 2023年10月03日 13:31/ 0 赞/ 29 阅读

相关 HTML5-新增表单类型和表单属性

文章目录新增表单类型新增表单属性新增表单类型 `number` 只允许输入数字（字母 e 除外）

r囧r小猫/ 2023年08月17日 17:32/ 0 赞/ 70 阅读

相关 HTML5表单新增功能

1、input表单的type类型 tel 说明：此类型要求输入一个电话号码,用来验证电话号码之类的文本框，需要与pattern属性结合使用，type的值

以你之姓@/ 2022年08月03日 03:12/ 0 赞/ 266 阅读

相关 HTML5--表单标签input新增type值

文章内容大部分都引用于W3C，仅供笔者自己使用参考。 1.input标签新增type值以及浏览器支持情况 ![这里写图片描述][SouthEast] --------

青旅半醒/ 2022年06月15日 12:13/ 0 赞/ 319 阅读

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

HTML5新增的表单事件:oninput、onkeyup、oninvali > 1：oninput 监听当前指定元素内容的改变；只要内容改变（添加元素，删除元素），就会触

末蓝、/ 2022年01月28日 17:43/ 0 赞/ 563 阅读

相关 HTML5 -01- H5表单新增特性

H5主要做什么？主要用来做效果CSS3，做结构H5标签，应用api-定位等js。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

以你之姓@/ 2021年12月14日 03:55/ 0 赞/ 452 阅读

相关 html其他表单和html5新增标签

邮箱表单 <input type="email" name="email" id="email" value="" /> url表单校验网址 <

一时失言乱红尘/ 2021年11月17日 03:58/ 0 赞/ 455 阅读