zoukankan      html  css  js  c++  java
  • input/change event practice

    输入框输入文字,h1显示动态文字

    关键词: .addEventListener(input ', function (e){

    })

    <!DOCTYPE html>
    
    <head>
        <title>Input Event</title>
        <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
        <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    </head>
    
    <body>
        <h1>Enter Your Username</h1>
        <input type="text" id="username">
    </body>
    
    </html>
    const input = document.querySelector('#username');
    const h1 = document.querySelector('h1');
    
    input.addEventListener('input', function (e){
        h1.innerText = `Welcome, ${input.value}`;
        if(input.value === ''){
            h1.innerText = 'Enter Your Username';
        }
    })
    const input = document.querySelector('input');
    const h1 = document.querySelector('h1');
    
    // input.addEventListener('change', function (e) {
    //     console.log("CASKDJASKJHD")
    // })
    
    input.addEventListener('input', function (e) {
        h1.innerText = input.value;
    })

    问题:change的作用是什么???跟input有什么区别

    ——当输入框的内容发生变化后(并且鼠标指针离开输入框之后),function里面的具体事件才会被触发

    ——区别:input是只要你敲动了键盘,每打一个字符,事件都会被触发,即使是做复制粘贴的动作,但是除了return,shift,control,up, down,left,right这些之外,这些并没有输入任何东西到输入框。

  • 相关阅读:
    Delphi中的接口和抽象类
    设计模式之六大原则
    C 标准库
    linux 管道和重定向
    linux c创建静态库(.a)
    一个C语言程序
    C#动态创建lambda表达式
    linq中order by 和group by (含lambda表达式实现)以及综合案例
    微信扫码登陆原理
    二维码扫码支付原理
  • 原文地址:https://www.cnblogs.com/LilyLiya/p/14307615.html
Copyright © 2011-2022 走看看