HiDocs
Search K

Appearance

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

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

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

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