• Login
    • Search
    • Categories
    • Recent
    • Tags
    • Users
    • Groups
    • Rules
    • Help

    Do more on the web, with a fast and secure browser!

    Download Opera browser with:

    • built-in ad blocker
    • battery saver
    • free VPN
    Download Opera

    Suggested Opera Keyboard Test <CODE>

    Lounge
    1
    1
    417
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • tennysongardi
      tennysongardi last edited by

      So I thought maybe all Opera browsers should have some form of keyboard testing. So, here's the code!

      <!DOCTYPE html>
      <html>
      <body>
      <div class="fx">
        <div>
          <textarea rows="5" name="test-target" id="test-target"></textarea>
          <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
        </div>
        <div class="flex">
          <pre id="console-log"></pre>
        </div>
      </div>
      <style>
      .fx {
        -webkit-display: flex;
        display: flex;
        margin-left: -20px;
        margin-right: -20px;
      }
      
      .fx > div {
        padding-left: 20px;
        padding-right: 20px;
      }
      
      .fx > div:first-child {
         width: 30%;
      }
      
      .flex {
        -webkit-flex: 1;
        flex: 1;
      }
      
      #test-target {
        display: block;
        width: 100%;
        margin-bottom: 10px; 
      }
      </style>
      <script>
      let textarea = document.getElementById('test-target'),
      consoleLog = document.getElementById('console-log'),
      btnClearConsole = document.getElementById('btn-clear-console');
      
      function logMessage(message) {
        document.getElementById("console-log").innerHTML += message + "<br>";
      }
      
      textarea.addEventListener('keydown', (e) => {
        if (!e.repeat)
          logMessage(`Key "${e.key}" pressed  [event: keydown]`);
        else
          logMessage(`Key "${e.key}" repeating  [event: keydown]`);
      });
      
      textarea.addEventListener('beforeinput', (e) => {
        logMessage(`Key "${e.data}" about to be input  [event: beforeinput]`);
      });
      
      textarea.addEventListener('input', (e) => {
        logMessage(`Key "${e.data}" input  [event: input]`);
      });
      
      textarea.addEventListener('keyup', (e) => {
        logMessage(`Key "${e.key}" released  [event: keyup]`);
      });
      
      btnClearConsole.addEventListener('click', (e) => {
        let child = consoleLog.firstChild;
        while (child) {
         consoleLog.removeChild(child);
         child = consoleLog.firstChild;
        }
      });
      </script>
      </body>
      </html>
      

      Hope you like it!

      Reply Quote 0
        1 Reply Last reply
      • First post
        Last post

      Computer browsers

      • Opera for Windows
      • Opera for Mac
      • Opera for Linux
      • Opera beta version
      • Opera USB

      Mobile browsers

      • Opera for Android
      • Opera Mini
      • Opera Touch
      • Opera for basic phones

      • Add-ons
      • Opera account
      • Wallpapers
      • Opera Ads

      • Help & support
      • Opera blogs
      • Opera forums
      • Dev.Opera

      • Security
      • Privacy
      • Cookies Policy
      • EULA
      • Terms of Service

      • About Opera
      • Press info
      • Jobs
      • Investors
      • Become a partner
      • Contact us

      Follow Opera

      • Opera - Facebook
      • Opera - Twitter
      • Opera - YouTube
      • Opera - LinkedIn
      • Opera - Instagram

      © Opera Software 1995-2025