JavaScript-day18 ------＞今天的学习主要内容表单事件；默认事件；表单验证；键盘事件等。

最新推荐文章于 2022-05-24 20:01:56 发布

莫名我

最新推荐文章于 2022-05-24 20:01:56 发布

阅读量264

点赞数

文章标签： javascript 前端服务器

本文链接：https://blog.csdn.net/qq_52429998/article/details/122222865

版权

1.表单事件

表单验证

form 可以直接给后端提交数据

不用form --- ajax提交数据给后端

表单事件

onsubmit 表单提交事件 form才可以使用此事件

onfocus 获取焦点表单事件，window也有 focus也会触发click事件

onblur 失去焦点表单事件，window也有

onchange 失去焦点并发生改变

oninput 输入时触发事件

有两个方法： focus() 获取焦点方法

blur() 失去焦点方法

    <h1>hhhhh</h1>
    <input type="checkbox" class="a">

    <form action="" method="get">
        <input type="text" name="username" class="user"> <br>
        <input type="text" name="password" > <br>
        <input type="submit" value="注册">
    </form>

    <script>
        var oForm = document.querySelector('form');
        oForm.onsubmit = function (e) {
            // alert(888);
            // 阻止它默认事件的发生
            e.preventDefault() ;


        }
        // focus() 获取焦点方法
        window.onfocus = function() {
            console.log('focus');
        }

        var oH1 = document.querySelector('h1') ;
        oH1.onfocus = function () {
            console.log(5555);
        }

        var oCheck = document.querySelector('.a') ;
        oCheck.onfocus = function () {
            console.log(999);
        }
        oCheck.onclick = function() {
            console.log('click');
        }

        // onblur  失去焦点  
        oCheck.onblur = function () {
            console.log('失去了你');
        }

        var oUser = document.querySelector('.user');
        // 失去焦点并且发生改变
        oUser.onchange = function() {
            console.log('change');
        }

        // oninput  输入时触发事件
        oUser.oninput = function () {
            console.log('change');
        }

    </script>

2.默认事件

复制粘贴事件

oncopy

onpaste

右键菜单事件

oncontextmenu

css样式：

    <style>
        ul{
            display: none;
            position: absolute;
        }
    </style>

body内容：

    <h2>3333</h2>
    <input type="text">

    <ul>
        <li>111</li>
        <li>2222</li>
        <li>33333</li>
    </ul>

    <script>

        var oH2 = document.querySelector('h2');
        var oInp = document.querySelector('input') ;
        var oUl = document.querySelector('ul');

        //复制粘贴事件
        //   oncopy
        //   onpaste
        // oH2.oncopy = function () {
        //     alert('您已经复制成功了')
        // }
        // oInp.onpaste = function () {
        //     alert('您已经粘贴成功')
        // }
        // oH2.oncopy = function (e) {
        //     e.preventDefault()
        //     alert('此处不能复制') ;
        // }

        //右键菜单
        document.oncontextmenu = function (e) {
            e.preventDefault() ;
            oUl.style.display = 'block' ;
            oUl.style.left = e.x + 'px' ;
            oUl.style.top = e.y + 'px' ;
        }

    </script>

3.限制输入的长度

    <input type="text">
    <span>还剩10个字符</span>

    <script>

        var oInp = document.querySelector('input') ;
        var oSpan = document.querySelector('span');

        oInp.oninput = function () {
            var sr = 10 - this.value.length ;
            oSpan.innerHTML = `还剩${sr}个字符` ;
            oSpan.style.color = 'green'

            if(sr <= 0) {
                this.value = this.value.substr(0 , 9) ;
                oSpan.innerHTML = '不能输入超过10个字符'
                oSpan.style.color = 'red';
                
            }

        }
    </script>

4.表单验证

css样式：

    <style>
        button:enabled{
            background-color: red;
            color: #fff;
            border: 0;
        }
        button:disabled{
            background-color: #666;
            color: #fff;
        }
    </style>

body内容：

    <p>
        <input type="text" class="username" autofocus>
        <span class="userSpan"></span>
    </p>
    <p>
        <input type="text" class="pwd">
        <span class="pwdSpan"></span>
    </p>
    <p>
        <button disabled>注册</button>
    </p>


    <script>

        var oUser = document.querySelector('.username') ;
        var oUserSpan = document.querySelector('.userSpan') ;

        var oPwd = document.querySelector('.pwd') ;
        var oPwdSpan = document.querySelector('.pwdSpan') ;

        var oBtn = document.querySelector('button')


        var flag1 = 0 ;
        var flag2 = 0 ;


        oUser.oninput = function () {  
            var oUserVal = this.value ;
            if(oUserVal === '') {
                oUserSpan.innerHTML = '空';
                oUserSpan.style.color = 'red'
                oBtn.disabled = true ;
                return 
            }
            if(oUserVal.length < 3 || oUserVal.length > 6) {
                oUserSpan.innerHTML = '长度不对';
                oUserSpan.style.color = 'red'
                oBtn.disabled = true ;
                return 
            }
            if(!isNaN(oUserVal.charAt(0))) {
                oUserSpan.innerHTML = '数字不能抬头';
                oUserSpan.style.color = 'red'
                oBtn.disabled = true ;
                return 
            }

            // 验证通过
            oUserSpan.innerHTML = '√';
            oUserSpan.style.color = 'green'
            flag1 = 1 ;

            // 在用户名输入正确以后。让密码获取焦点  --- 一般使用较少
            // oPwd.focus()


            var flag = flag1 + flag2 ;
            console.log(flag);
            if(flag == 2){
                oBtn.disabled = false ;
            } else {
                oBtn.disabled = true ;
            }
        }

        oPwd.oninput = function () {  
            var oUserVal = this.value ;
            if(oUserVal === '') {
                oPwdSpan.innerHTML = '空';
                oPwdSpan.style.color = 'red'
                oBtn.disabled = true ;
                return 
            }
            if(oUserVal.length < 3 || oUserVal.length > 6) {
                oPwdSpan.innerHTML = '长度不对';
                oPwdSpan.style.color = 'red'
                oBtn.disabled = true ;
                return 
            }
            oPwdSpan.innerHTML = '√';
            oPwdSpan.style.color = 'green'
            flag2 = 1 ; 


            var flag = flag1 + flag2 ;

            if(flag == 2){
                oBtn.disabled = false ;
            } else {
                oBtn.disabled = true ;
            }
        }


        



    </script>

5.键盘事件

键盘事件：

keyup 触发一次

keydown 持续性触发

keypress 按压 = down 持续性触发部分功能键不触发

键盘事件的键值

key 键值

keyCode 键值对应的ASCII值（都会识别为小写）

组合键 (altkey / shiftkey / ctrlkey)

ctrl+回车 = 确认

    <script>


        document.onkeyup = function (e) {  

            // console.log('up');
            // console.log(e.key);  // e.key  键值
            // console.log(e.keyCode);  // 键值对应的ASCII值 (都会识别为小写)
            // console.log(e.which); // keyCode的兼容写法

            var code = e.keyCode || e.which ;


            // console.log(e.shiftKey);  // 判断是否按了shift键  辅助键
            // console.log(e.altKey);   //  判断是否按了alt键    辅助键
            // console.log(e.ctrlKey);  //  判断是否按了ctrl键   辅助键

            // // ctrl + enter
            if(e.ctrlKey && code === 13) {
                console.log('发送');
            }

            

        }

        // document.onkeydown = function () {  
        //     console.log('down');
        // }

        // document.onkeypress = function () {  
        //     console.log('press');
        // }

    </script>

6.键盘控制盒子

css样式：

    <style>
        .a{
            width: 30px;
            height: 30px;
            background-color: #f00;
            position: absolute;
        }
    </style>

body：

    <div class="a"></div>

    <script>

        var oBox = document.querySelector('.a') ;
        var t ;
        var maxX = document.documentElement.clientWidth - oBox.offsetWidth ;
        var maxY = document.documentElement.clientHeight - oBox.offsetHeight ;
        document.onkeyup = function (e) {  
            e = e || event ; 
            var code = e.keyCode || e.which ;
            console.log(code);  // 上38 下40  左37 右39
            var speed = 10 ;
            clearInterval(t)
            t = setInterval(function () {  
                // 每一次按下键盘的时候，都在盒子原来的 基础上移动10px
                var x = parseInt(getComputedStyle(oBox).left) ;
                var y = parseInt(getComputedStyle(oBox).top) ;
                if(code === 37) x -= speed ;
                if(code === 38) y -= speed ;
                if(code === 39) x += speed ;
                if(code === 40) y += speed ;
                if(x > maxX) x = maxX ;
                if(y > maxY) y = maxY ;
                if(x < 0) x = 0 ;
                if(y < 0) y = 0 ;
                oBox.style.cssText = `left:${x}px;top:${y}px` ;
            },100)
        }

    </script>

7.运动

css样式：

    <style>
        .a{
            width: 50px;
            height: 50px;
            background-color: #f00;
            position: absolute;
            left: 1103px;
        }
    </style>

body：

    <div class="a"></div>


    <script>
        var oDiv = document.querySelector('.a') ;
        move(oDiv , 100 , 10)
        
        // var t = setInterval(function () {  
        //     // 每隔一段时间在当前位置的基础上+5
        //     var cur = parseInt(getComputedStyle(oDiv).left) ;
        //     cur -= speed ;
        //     oDiv.style.left = cur + 'px'
        //     if(cur <= 0) {
        //         clearInterval(t) ;
        //         oDiv.style.left = 0 ;
        //     }
        // },10)


        function move(ele , end , speed) {  
            // var speed = 5 ;
            var t = setInterval(function () {  
                // 每隔一段时间在当前位置的基础上+5
                var cur = parseInt(getComputedStyle(ele).left) ;
                cur -= speed ;
                ele.style.left = cur + 'px'
                if(cur <= end) {
                    clearInterval(t) ;
                    ele.style.left = end + 'px' ;
                }
            },10)
        }

    </script>