JavaScript to implement input box content prompt and hidden function

JavaScript to implement input box content prompt and hidden function

Sometimes the input box is small, and you want to see a prompt box with a magnified input content after entering the content.

Implementation ideas

  • First write a prompt box on the page, and then set the CSS property of the prompt box: display to none to hide it
  • Get the input box element object and information prompt box element object
  • Bind keyboard events to the input box element object - - -keyup,
  • Event handler: Determine whether the input content is empty. If not, assign the content of the input box to the information prompt box and set the information prompt box display: display is set to block; if it is empty, set the prompt box not to display
  • Add focus gain and focus loss events.
  • blur- - - Lost focus: When the mouse does not select the input box and there is no cursor flashing in the input box, the information prompt box is not displayed: display is set to none
  • Focus- - -Get the focus: When the mouse clicks the input box and the cursor flashes in the input box, it is determined that if there is content in the input box, the information prompt box is displayed;

Note that this is the keyboard release event. Do not use the keyboard press event: keydown or keypress. The typed words are not entered when the keyboard is pressed. The typed words are entered only when the keyboard is released.

Code example:

<!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>Simulate JD Express tracking number query</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        input {
            outline-style: none;
        }
        
        .search {
            position: relative;
            width: 220px;
            margin: 100px auto;
        }
        
        .info {
            display: none;
            position: absolute;
            top: -40px;
            left: 0;
            width: 170px;
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, .2);
        }
        
        .info::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-color: #fff transparent transparent;
            border-style: solid dashed dashed;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="info">(*´▽｀)ノノ</div>
        <input type="text" class="express" placeholder="Please enter the express number you want to query">
        <input type="button" value="Query">
    </div>
    <script>
        var expressNo = document.querySelector('.express');
        var info = document.querySelector('.info');


        expressNo.addEventListener('keyup', function() {
            console.log(expressNo.value);
            console.log(info.innerHTML);
            if (this.value == '') {
                info.style.display = 'none';
            } else {
                info.style.display = 'block';
                info.innerHTML = this.value;
            }
        });


        // Lose focus, hide the box expressNo.addEventListener('blur', function() {
            info.style.display = 'none';
        })

        //Get the focus event and display the box expressNo.addEventListener('focus', function() {
            if (this.value !== '') {
                info.style.display = 'block';
            }
        })
    </script>
</body>

</html>

Page effect:

Express tracking number query.gif

This is the end of this article about how to use javascript to implement input box content prompts and hidden functions. For more related js input box content prompts and hidden content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Implementation of fuzzy prompt function of javascript input box
  • JS realizes the effect of disappearing the prompt text of the input box when it is clicked
  • Methods for outputting information in JavaScript (information confirmation box-prompt input box-document flow output)
  • Native js realizes the display and hiding of password input box value
  • Hide the initial content after activating the input box using javascript

<<:  Detailed explanation of Docker container data volumes

>>:  MySQL 8.0.22 installation and configuration graphic tutorial

Recommend

Detailed explanation of using Nodejs built-in encryption module to achieve peer-to-peer encryption and decryption

Encryption and decryption are an important means ...

React handwriting tab switching problem

Parent File import React, { useState } from '...

Element dynamic routing breadcrumbs implementation example

To master: localStorage, component encapsulation ...

Detailed steps to enable SourceGuardian (sg11) encryption component on Linux virtual hosts

Note: sg11 Our company only supports self-install...

Introduction to JavaScript Number and Math Objects

Table of contents 1. Number in JavaScript 2. Math...

Example of how to change the domestic source in Ubuntu 18.04

Ubuntu's own source is from China, so the dow...

MySQL scheduled backup solution (using Linux crontab)

Preface Although some love in this world has a pr...

In-depth understanding of the creation and implementation of servlets in tomcat

1. What is a servlet 1.1. Explain in official wor...

js to achieve waterfall flow layout (infinite loading)

This article example shares the specific code of ...

Use nginx + secondary domain name + https support

Step 1: Add a secondary domain name to the Alibab...

Detailed explanation of using Docker to quickly deploy the ELK environment (latest version 5.5.1)

After installing Docker on the Linux server, Pull...

js to write the carousel effect

This article shares the specific code of js to ac...

How to make CSS child elements highly consistent with parent elements

Absolute positioning method: (1) Set the parent e...

HTML+jQuery to implement a simple login page

Table of contents Introduction Public code (backe...

How to implement Ajax concurrent request control based on JS

Table of contents Preface Ajax serial and paralle...