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

Docker memory monitoring and stress testing methods

The Docker container that has been running shows ...

A magical MySQL deadlock troubleshooting record

background Speaking of MySQL deadlock, I have wri...

Rhit efficient visualization Nginx log viewing tool

Table of contents Introduction Install Display Fi...

A complete guide to clearing floats in CSS (summary)

1. Parent div defines pseudo-classes: after and z...

Vue two same-level components to achieve value transfer

Vue components are connected, so it is inevitable...

Ubuntu Basic Tutorial: apt-get Command

Preface The apt-get command is a package manageme...

SQL implementation of LeetCode (177. Nth highest salary)

[LeetCode] 177.Nth Highest Salary Write a SQL que...

vue-cropper component realizes image cutting and uploading

This article shares the specific code of the vue-...

A detailed summary of HTML tag nesting rules suitable for beginners

I have been relearning HTML recently, which can be...

Detailed explanation of how to use Vue self-nested tree components

This article shares with you how to use the Vue s...

Use of MySQL triggers

Triggers can cause other SQL code to run before o...

Detailed explanation of how to view the current number of MySQL connections

1. View the detailed information of all current c...

Vue dynamic menu, dynamic route loading and refresh pitfalls

Table of contents need: Ideas: lesson: Share the ...

How to deploy MongoDB container with Docker

Table of contents What is Docker deploy 1. Pull t...

Implementation of importing and exporting vue-element-admin projects

vue-element-admin import component encapsulation ...