Secure your accounts with our innovative password manager tool that allows you to easily create, manage

Is there a way to show text in dots format using HTML, similar to how it appears in a password field, like this:

Password: <input type="password" name="pwd">This text looks like dots</input>

Without relying on an <input>? I'm interested in applying the obscured appearance of a password field outside of a form input.

Imagine a scenario where a webpage is displaying a salary figure and you don't want to present the information within a textbox. It should give the impression that the content is not editable, but at the same time remain hidden when the page loads to prevent unauthorized viewers from accessing it. The text should initially display as "Salary: ●●●●●●●● (click to view)" and then reveal the actual value as "Salary: 54372.23 (click to hide)".

javascriptjqueryhtmlcssredaction

Answer №1

Here is a simple illustration:

$('[data-hidden-value] > .toggle').on('click', function () {
  var
    $wrapper = $(this).parent(),
    $display = $wrapper.find('.display'),
    revealed = $wrapper.data('revealed'),
    hiddenValue = String($wrapper.data('hidden-value'))
  ;

  $display.html(revealed ? hiddenValue.replace(/./g, '*') : hiddenValue);
  $wrapper.data('revealed', !revealed);
});

using this html structure:

Example salary display:

<span data-hidden-value="54372.23">
  <span class="display">********</span>
  <a class="toggle">(click to toggle)</a>
</span>

Test it out: http://jsfiddle.net/MH2h6/

Answer №2

After reviewing your code snippet, achieving toggling behavior can be simplified by including a quick conditional check to determine if the hidden data or redacted string is currently being displayed:

var $secrets = $('.secret');
$secrets.click( function () {
    var $secret = $(this);
    var password = $secret.data('password');
    $secret.text(($secret.text() == password) ? '****' : password);
});

For a demonstration, you can view it here.

However, storing sensitive information directly in your HTML is not secure. For proper implementation, consider making an AJAX request to your server to retrieve the desired data.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The form created using jQuery is not submitting correctly because the PHP $_FILES array is empty

Creating an HTML form dynamically in jQuery and submitting the form data via Ajax to 'add_sw.php' for processing is my current challenge. However, I have encountered an issue where the PHP script cannot access the PHP $_FILES variable as it turn ...

javascriptphpjqueryhtmlajax

Minimizing lagging scroll movements while utilizing overflow-y: scroll;

I am currently working on a 2 column layout, where the right-hand column contains a scrollable list displaying a maximum of 200 items (implemented using a ul with overflow-y: scroll;). However, I have noticed that scrolling through the right-hand column i ...

htmlcssperformancegoogle-chromegoogle-chrome-devtools

Guide to generating an HTML table with database information employing jquery and ajax

I am faced with the challenge of creating a table using information retrieved from a database. Despite being able to view all the data through console.log, I am struggling to convert that into a table format. My latest version now displays at least one op ...

jqueryhtmlmysqlajax

Extract HTML and Retrieve Assets in a .NET Windows Service

I am developing a service that runs periodically to retrieve a specified URL. Currently, I am using the HttpWebRequest class for making HTML requests. Although this method works effectively, I also need to track the loading time of the page including CSS, ...

.nethtmlservicehttpwebrequestbrowser

Get rid of the Bootstrap 4 button outline Mixin

I'm feeling a bit stuck on how to tackle this challenge. My goal is to create a sass mixin that eliminates the default blue Bootstrap outline present on buttons. This way, I can easily apply it to specific buttons as needed. If anyone could offer so ...

csstwitter-bootstrapsassbootstrap-4twitter-bootstrap-4

Ensuring secure headers in Node.js backend for enhanced security

Is it secure to send user login data through authentication headers for a login API endpoint? The authorization headers contain an object encoded in Base64 with user data like username, hashed password (not yet hashed in the code), and a server key for c ...

javascriptnode.jsexpresssecurity

The PHP login form must be submitted twice

I've encountered an issue that's stumping me. All of my other forms are functioning correctly, except for the Login Form, which needs to be filled out twice before it works. First, I input my username and password, submit the form, and the page ...

phphtmlmysql

User Interface Components in Backbone Views

I'm considering if there is a more efficient approach to this situation. I've got some HTML that requires event handling. Query 1: Since there are no data, models, or collections associated with it, do I need a render method? Query 2: I believ ...

javascriptjquerybackbone.jsbackbone-views

What's preventing me from using just one comparison condition in TypeScript?

The issue at hand is quite simple: An error occurred because I tried to compare a number with a 'Ref<number>' object. It seems ridiculous that I can't compare two numbers, but as I am new to Typescript, I would greatly appreciate some ...

javascripttypescriptvue.jsdomfrontend

Having difficulty in compressing Vue.js application

My Vue.js Application contains the following code snippet: (function() { initApp(); })(); function initApp() { window.myApp = new Vue({ el: '#wrapper', data() { return { somedata: [] } } }); } & ...

javascriptvue.jsminify

Remove the items from the class dropdown list on the TinyMCE link button and popup

When using TinyMCE and clicking the link button, a popup window will appear asking for link details. One of the fields in this popup is for adding a CSS "Class". Is there a way to clear this list? I noticed that there is a plugin setting within advlink wh ...

csshyperlinktinymce

Running a PHP MySQL function with Onclick without using POST data

I am seeking to trigger a MySQL search using an ONCLICK event in PHP. Initially, I considered utilizing a JavaScript or jQuery function to parse the selected ID through JS. However, I am unsure of how to re-execute the PHP to conduct a new search on the d ...

javascriptphpjqueryhtml

Enhancing Slider Appearance in Material-UI (React)

I am currently working on a project that involves creating a slider with specific values using Material UI and React. I followed the basic implementation from the documentation, which seems to work without needing any additional CSS. However, when I integr ...

javascriptreactjsmaterial-uislider

What strategies are effective for handling state reactively in Vuex?

Currently, I am facing an issue with my vuex store. I have implemented two different actions in my store, one being reactive and the other not. However, I specifically need the loadSlidesEach() action to be reactive so that the data gets updated accordingl ...

javascriptvue.jsvuejs2vuex

Instructions for highlighting a dynamically added UL Li element for a brief 3-5 seconds after clicking a button

When I click a button, I dynamically add UL and LI elements. After they are added, I want to show them highlighted on the user interface for a brief period, like 3-6 seconds. ...

javascriptjqueryasp.net

The redirection to the webpage is not occurring as expected

I've been attempting to redirect another webpage from the homepage in my node server. However, the redirect isn't working as intended to link to idea.html, where the relevant HTML file is located. Can anyone assist me in identifying any errors in ...

javascripthtmlcssnode.jsreactjs

What are the benefits of using a synchronous XMLHttpRequest?

Many developers opt for asynchronous XMLHttpRequest requests, but the existence of synchronous requests suggests that there could be valid reasons for using them. What might those reasons be? ...

javascriptajax

Discovering inner arrays within an outer array using the Plus function

Apologies if these questions seem basic in terms of JavaScript. Challenge 1. I am attempting to write code that can identify an inner array within an outer array, and the structure of the array looks something like this; var array = ['Bob', [ ...

javascriptjqueryarraysfunctionanonymous

Using jQuery to dynamically change button icons when clicked

My form has a unique structure: <form name="armdisarmform" action="/cameras" method="POST"> <input type='hidden' name='armdisarmvalue' value="ENABLED"/> <button class="armdisarm" name="armdisarmbutton" onClick=&a ...

jqueryjquery-ui

Ways to incorporate sass:math into your vue.config.js file

While using vue-cli with Vue 2.6 and sass 1.49, I encountered errors in the console related to simple division calculations: Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. I attempted to ...

javascriptvue.jswebpacksassvuejs2