JavaScript to display hidden form text

JavaScript to display hidden form text

This article shares the specific code of JavaScript to display hidden form text for your reference. The specific content is as follows

Implementation ideas

Use onfocus and onblur events

onfocus- - -Get the focus (mouse clicks on the input box, and there is a flashing cursor in the input box)

onblur- - - Loss of focus (the mouse is not selected in the input box, and the flashing cursor in the input box is lost)

1. Set a default value for the input box

2. Get the input box object and bind events to it: onfocus and onblur
When getting the focus (onfocus) - - - determine whether the value of the input box is the default value. If it is the default initial value, change the value to empty, the default initial value will disappear, and you can enter your own value. When removing the focus (onblur) - - - determine whether the value of the input box has no value. If not, assign the default value to the value. The default value will be displayed again after the unentered content is moved away.

3. You can also set different text colors for the focus and focus-lost states to make the two states more distinct.

Example 1:

Code:

<!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>Get/Lose Focus</title>
    <style>
        input {
            color: #ccc;
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text" value="Mobile">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function() {
            if (this.value === 'mobile phone') {
                this.value = '';
            }
            this.style.color = '#333';
        }

        text.onblur = function() {
            if (this.value === '') {
                this.value = 'Mobile phone';
            }
            this.style.color = '#ccc';
        }
    </script>
</body>

</html>

Page effect:

Example 2

Code:

<!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>Username display hide</title>
    <style>
        input {
            font-size: 14px;
            color: #999;
            outline: none;
            padding: 3px 0 3px 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <!--Username shows hidden content-->
    <input type="text" value="Email/ID/Phone Number" class="userName">
    <script>
        var userName = document.querySelector('.userName');
        userName.onfocus = function() {
            if (this.value === 'email/ID/phone number') {
                this.value = '';
                this.style.borderColor = 'pink';
            } else {
                this.style.borderColor = 'pink';
                this.style.color = '#999';
            }
        }
        userName.onblur = function() {
            if (this.value === '') {
                this.value = 'Email/ID/Phone Number';
                this.style.borderColor = '#ccc';
                this.style.color = '#999';
            } else {
                this.style.borderColor = '#ccc';
                this.style.color = '#333';
            }
        }
    </script>
</body>

</html>

Page effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JS implements clicking the small eye in the form to display the password in the hidden password box
  • Hide and display form password based on JavaScript
  • JS implements the effect of adding border display to the checkbox in the form
  • How to display the contents of a form on the screen using JavaScript
  • How to display the number of elements in a form using JavaScript
  • Solution to display prompt information in password form under js

<<:  How to monitor Tomcat using LambdaProbe

>>:  Analysis of the process of building a cluster environment with Apache and Tomcat

Recommend

Vue + element to dynamically display background data to options

need: Implement dynamic display of option values ...

How to reduce the root directory of XFS partition format in Linux

Table of contents Preface System environment Curr...

How to configure Jupyter notebook in Docker container

Jupyter notebook is configured under the docker c...

Detailed explanation of three ways to import CSS files

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

Solution to the problem that the border style of the <td></td> tag cannot be displayed in the browser

question: In some browsers, such as 360 browser&#...

MySQL index cardinality concept and usage examples

This article uses examples to explain the concept...

Detailed explanation of MySQL stored procedures, cursors, and transaction examples

Detailed explanation of MySQL stored procedures, ...

Detailed explanation of for loop and double for loop in JavaScript

for loop The for loop loops through the elements ...

Sample code using the element calendar component in Vue

First look at the effect diagram: The complete co...

Vue3 based on script setup syntax $refs usage

Table of contents 1. Vue2 syntax 2. Use of Vue3 1...

IE9beta version browser supports HTML5/CSS3

Some people say that IE9 is Microsoft's secon...

JavaScript operation element examples

For more information about operating elements, pl...

Nginx Linux installation and deployment detailed tutorial

1. Introduction to Nginx Nginx is a web server th...

Explanation of Linux kernel optimization configuration for high-concurrency nginx server

Since the default Linux kernel parameters are bas...

Vue implements sample code for dragging files from desktop to web page (can display pictures/audio/video)

Effect If you use it, please optimize the code an...