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

末蓝、 2022-01-28 17:43 655阅读 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 条评论，655人围观）

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

相关阅读

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

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

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

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

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

川长思鸟来/ 2023年10月03日 13:31/ 0 赞/ 116 阅读

相关 HTML5新增input表单（HTML5）

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

迷南。/ 2023年10月03日 13:31/ 0 赞/ 120 阅读

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

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

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

相关 HTML5中新增的表单元素——datalist元素

今天学习到了一个比较好的元素（datalist元素），怕自己忘了，写了这篇博客：它可以解决在单选框中只能选择不能输入的问题，类似于提示词的作用：这里注意

小咪咪/ 2023年07月06日 06:23/ 0 赞/ 124 阅读

相关 HTML5表单新增功能

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

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

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

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

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

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

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

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

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

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

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

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

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

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