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