Javascript ពន្យល់ keyup keydown និង keypress

ការប្រើ event keyboard នៅ Javascript គឺមានបីគឺ៖

  • keydown : គឺនៅពេលយើងចុច keyboard នោះគឺ key វាចុះទៅក្រោមគឺយើងហៅថា keydown
  • keyup : គឺនៅពេលយើងចុច keyboard ចុះទៅក្រោមរួចហើយយើងប្រលែងដៃនោះ key វាលូតឡើងលើវិញ គឺយើងហៅថា keyup
  • keypress : គឺវាប្រើទាំងពីរគឺ keydown និង keydown 
    <body>
    <div id="box">
        <label for="">A</label>
         <input type="text" id="nA">
         <label for="">B</label>
         <input type="text" id="nB">
         <Label>total: </Label>
         <b id="total"> value</b>
    </div>

    <script>
        const a = document.getElementById("nA")
        const b = document.getElementById("nB") 
        const total = document.getElementById("total")

        a.addEventListener("keyup", function(){
            total.innerHTML = a.value
        })

    </script>
</body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: black;
    }
    #box{
        width: 600px;
        height: 150px;
        background-color: aliceblue;
        margin-left: auto;
        margin-right: auto;
        padding: 30px;
        margin-top: 100px;
    }
</style>
<body>
    <div id="box">
        <label for="">A</label>
         <input type="text" id="nA">
         <label for="">B</label>
         <input type="text" id="nB">
         <Label>total: </Label>
         <b id="total"> value</b>
    </div>

    <script>
        const a = document.getElementById("nA")
        const b = document.getElementById("nB") 
        const total = document.getElementById("total")

        a.addEventListener("keyup", function(){
            total.innerHTML = a.value * b.value
        })

        b.addEventListener("keyup", function(){
            total.innerHTML = a.value * b.value
        })

    </script>
</body>
</html>
    • Tags
    Reactions

    Post a Comment

    0 Comments