I am looking to integrate a "reveal password" feature using Bootstrap 5

Question

I am looking to integrate a "reveal password" feature using Bootstrap 5

I had hoped for something similar to this

However, what I ended up with was this

This is the code I have:

              <input
                type="password"
                class="form-control"
                placeholder="password"
                id="password-input"
                aria-label="password input"
                aria-describedby="password-input"
              />
              <span class="input-group-text" id="password-input">@</span>

All the examples I've found online look great, but when I implement the code in my project, it doesn't seem to work :(

html css angular angular-ui-bootstrap bootstrap-5

Answer 1

Answer №1

Here is a useful way to wrap your input and span tag:

<div class="input-group flex-nowrap">
    <input type="password" class="form-control" placeholder="contraseña" id="password-input" aria-label="password input" aria-describedby="password-input" />
    <span class="input-group-text" id="password-input">@</span>
</div>

Answer 2

Here is a useful way to wrap your input and span tag:

<div class="input-group flex-nowrap">
    <input type="password" class="form-control" placeholder="contraseña" id="password-input" aria-label="password input" aria-describedby="password-input" />
    <span class="input-group-text" id="password-input">@</span>
</div>

Answer 3

Answer №2

<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>My Unique Document</title>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
    i {
        cursor: pointer;
    }

</style>

<body>
    <div>
        <!-- Unique Password field -->
        <label for="Password">Password:
            <input type="password" class="border border-0" value="" id="myInput">
            <!-- An element to toggle between password visibility -->
            <i class="fa fa-eye" style="font-size:24px" onclick="myFunction()"></i>
        </label>
    </div>

    <script>
        function myFunction() {
            var x = document.getElementById("myInput");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>
</body>

Answer 4

<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>My Unique Document</title>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
    i {
        cursor: pointer;
    }

</style>

<body>
    <div>
        <!-- Unique Password field -->
        <label for="Password">Password:
            <input type="password" class="border border-0" value="" id="myInput">
            <!-- An element to toggle between password visibility -->
            <i class="fa fa-eye" style="font-size:24px" onclick="myFunction()"></i>
        </label>
    </div>

    <script>
        function myFunction() {
            var x = document.getElementById("myInput");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>
</body>

I am looking to integrate a "reveal password" feature using Bootstrap 5

Answer №1

Answer №2

Similar questions

align-content and justify-content in flexbox are not producing the desired results

Hovering over a container will display the text in a single line

Ensure the HTML table's <td> cell width automatically adjusts to accommodate the image, regardless of its dimensions

A guide to extracting attribute values from HTML using Angular 4

Conflicting Transformation Properties Causing CSS Issues Within a Single Element

Integrate a Google Maps API Javascript into a Flex application

Display the elements of a div at a reduced size of 25% from its original dimensions

Executing PHP code within the .html() jQuery function

Initiate an Ajax request solely for the elements currently visible on the screen

Having trouble getting CSS media query to work in my Rails mailer template

Resolving odd SVG anomalies

The Angular ng-repeat directive is populating a list with items, but the parameters enclosed in double curly braces

Achieving a function call within a Backbone view in Backbone.js

Ways to modify the datepicker format in Angular Material

Ways to prevent scrolling in Angular 6 when no content is available

Tips on assigning a value to a dynamically generated drop-down element

The execution of jQuery code from PHP using $.ajax is not functioning properly

Assistance with Validating Forms Using jQuery

The use of "runat="server" in the HTML Head tag is preventing C# embedded code blocks from being converted to client-side code

Scrolling Horizontally with Bootstrap Cards