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这些之外,这些并没有输入任何东西到输入框。

  • 相关阅读:
    js的alert乱码问题
    (6)select语句
    (5)视图
    (4)索引
    (3)操作数据库
    (2)MySQL数据类型
    (1)MySQL概述
    RocketMQ安装使用
    uniapp打包h5
    面试必问 如何保证缓存与数据库的一致性
  • 原文地址:https://www.cnblogs.com/LilyLiya/p/14307615.html
Copyright © 2011-2022 走看看