JS基础知识day14

最新推荐文章于 2024-08-20 16:48:16 发布

是阿竹呀

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量433

点赞数 2

分类专栏： JS学习文章标签：表单事件键盘事件前端开发事件处理输入限制

本文链接：https://blog.csdn.net/lxz1151184225/article/details/122222835

版权

JS学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

表单验证

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

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

表单事件

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

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

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

onchange 失去焦点并发生改变

oninput 输入时触发事件

两个方法

focus() 获取焦点方法

blur() 失去焦点方法

        var oForm = document.querySelector('form') ;
        oForm.onsubmit =  function (e) {  
            // alert(666)  阻止  默认
            e.preventDefault()
        }

复制粘贴事件

oncopy

onpaste

右键菜单事件

oncontextmenu

限制输入字符案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

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

    <script>

        var oInp = document.querySelector('input') ;
        var oSpan = document.querySelector('span') ;
        oInp.oninput = function () {  
            var sy = 10 - this.value.length ;
            oSpan.innerHTML = `还剩${sy}个字符`
            oSpan.style.color = 'black'
            if(sy <= 0) {
                this.value = this.value.substr(0 , 9) ;
                oSpan.innerHTML = '不能在输入超过10个字符'
                oSpan.style.color = 'red'
            }
        }
    </script>
    
</body>
</html>

键盘事件：

keyup 触发一次

keydown 持续性触发

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

键盘事件的键值

key 键值

keyCode 键值对应的ASCII值 (都会识别为小写)

组合键(altKey / shiftKey / ctrlKey)

ctrl+回车 = 确认

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

是阿竹呀

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础知识day14

表单验证 form 可以直接给后端提交数据不用form --- ajax提交数据给后端表单事件 onsubmit 表单提交事件 form才可以使用此事件 onfocus 获取焦点表单事件， window也有 focus也会触发click事件 onblur 失去焦点表单事件， window也有 onchange 失去焦...
复制链接

扫一扫

专栏目录