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

How to use positioning to center elements (web page layout tips)

How to center an element in the browser window He...

Solution to the problem that Centos8 cannot install docker

Problem [root@zh ~]# [root@zh ~]# [root@zh ~]# yu...

Optimized implementation of count() for large MySQL tables

The following is my judgment based on the data st...

Detailed explanation of setting Context Path in Web application

URL: http://hostname.com/contextPath/servletPath/...

Docker container operation instructions summary and detailed explanation

1. Create and run a container docker run -it --rm...

Vue custom instructions to achieve pop-up window drag four-side stretching and diagonal stretching effect

introduction The company's recent Vue front-e...

Installation and use of Linux operation and maintenance tool Supervisor (process management tool)

1. Introduction Supervisor is a general process m...

How to choose the right index in MySQL

Let’s take a look at a chestnut first EXPLAIN sel...

MySQL DeadLock troubleshooting full process record

【author】 Liu Bo: Senior Database Manager at Ctrip...

How to increase your web performance by 3 times by turning on a parameter in Nginx

1. Some problems encountered I remember when we w...

Detailed explanation of three ways to import CSS files

There are three ways to introduce CSS: inline sty...

Tutorial on installing MySQL 5.6 on CentOS 6.5

1. Download the RPM package corresponding to Linu...

Use of environment variables in Docker and solutions to common problems

Preface Docker can configure environment variable...

Example of how to reference environment variables in Docker Compose

In a project, you often need to use environment v...

Vue codemirror realizes the effect of online code compiler

Preface If we want to achieve the effect of onlin...