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

Examples of clearfix and clear

This article mainly explains how to use clearfix a...

Docker container explains in detail how to simplify the image and reduce the size

Table of contents 1. Reduce the number of image l...

In-depth analysis of why MySQL does not recommend using uuid or snowflake id as primary key

Preface: When designing a table in MySQL, MySQL o...

Nginx cache configuration example

When developing and debugging a web application, ...

Thoughts and experience sharing on interactive design of reading lists for information products

A list is defined as a form of text or chart that...

Detailed explanation of single-choice and multiple-choice selection in HTML select tag

The select element creates a single-select or mult...

HTML form tag usage learning tutorial

Forms in HTML can be used to collect various type...

Why developers must understand database locks in detail

1.Lock? 1.1 What is a lock? The real meaning of a...

js to realize automatic lock screen function

1. Usage scenarios There is such a requirement, s...

Brief introduction and usage of Table and div

Web front end 1 Student ID Name gender age 01 Zha...

css input[type=file] style beautification (input upload file style)

Effect: <!doctype html> <html> <he...

MySQL database green version installation tutorial to solve system error 1067

What is the difference between the green version ...

How to define input type=file style

Why beautify the file control? Just imagine that a...

How to capture exceptions gracefully in React

Table of contents Preface ErrorBoundary Beyond Er...

Several ways to solve the 1px border problem on mobile devices (5 methods)

This article introduces 5 ways to solve the 1px b...