Conceal certain digits of a credit card number in a masked format for security purposes

Is there a reliable method to mask Credit Card numbers in password format within a text field?

**** **** **** 1234

If you are aware of a definitive solution, please share it with us.

Answer №1

If you prefer to consolidate all the numbers into a single input field, consider implementing the following solution:

$("#ccNr").keydown(function(e){
  if(e.keyCode != 8){
    var length = $(this).val().replace(/ /g,"").length;
    if(length < 12){
       var val = "";
       for(var i = 0; i < length + 1; i++){
         val+="*";
       if((i+1)%4 == 0){
            val+=" ";
          }
       }
       $(this).val(val);
    }
    if(length < 12 || length >= 16){
        e.preventDefault();       
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ccNr">

There is room for enhancement in this code snippet. It serves as a demonstration of the concept. The key aspect is overriding the default behavior of the keydown event. Ensuring that e.keyCode != 8 verifies that the pressed key is not the backspace key. If you plan on using this code, consider checking for other keys and filtering out non-numeric values.

Answer №2

If you want to enhance security, consider setting the first three input types as passwords and the last one as text:

function input_onchange(me) {
    if (me.value.length < me.getAttribute('maxlength') - 1) {
        return;
    }
    var i;
    var elements = me.form.elements;
    for (i = 0, numElements = elements.length; i < numElements; i++) {
        if (elements[i] == me) {
            break;
        }
    }
    elements[i + 1].focus();
}
<form action="post.php" method="post" accept-charset="utf-8">
    <input type="password" value="" id="first" size="4" maxlength="4"
        onkeypress="input_onchange(this)"/>
    <input type="password" value="" id="second" size="4" maxlength="4"
        onkeypress="input_onchange(this)"/>
    <input type="password" value="" id="third" size="4" maxlength="4"
        onkeypress="input_onchange(this)"/>
    <input type="text" value="" id="fourth" size="4" maxlength="4"/>
    <p><input type="submit" value="Send Credit Card"></p>
</form>

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

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

What is the proper way to update a dropdown value in a React JS component?

Can you please guide me on how to assign a value in a dropdown in react js? I am retrieving the dropdown data after a delay of 3000 milliseconds and then I need to set a value in the dropdown. const App = ({ children }) => { const val = "ax"; const ...

Heroku App Breaks Down - Fails to Render Static HTML Content (Express Server)

Despite my best efforts, I keep encountering this persistent error on Heroku whenever I attempt to serve a static HTML page with some basic JS, images, and CSS. I diligently followed all the advice from SO, made adjustments to index.js, restructured files, ...

Retrieve the subdomain from within the passport FacebookTokenStrategy and GoogleStrategy

In the process of developing a node.js application with wildcard subdomains, I am creating separate parts of the app for each subdomain that will have distinct user authentication based on the subdomain. For instance, envisioning my app having subdomains ...

Upon selecting the correct prompt, it fails to respond when I press enter

I attempted to use a multi-search script that I found on a website. I followed the instructions given and made the necessary changes. After saving the file as an HTML document, I opened it in Chrome. However, when I type in a word and hit enter, nothing ha ...

MUI provides the flexibility to adjust the opacity separately for Chip labels/icons and backgrounds

My objective is to customize the opacity of label/icon and background in MUI Chip. I want the label & icon to have an opacity of 1, while the background should have an opacity of 0.0571. Technologies used in this project include React, TypeScript, Materia ...

Using HTTP in Angular can cause issues with two-way data binding not functioning properly

In my Angular project, I am utilizing the ControllerAs method along with ui.router. I have an API in PHP that I call to retrieve data, and then use the vm approach to set scope variables for templates. However, I am facing an issue where the template does ...

A guide on breaking down the ID passed from the backend into three segments using React JS

I pulled the data from the backend in this manner. https://i.stack.imgur.com/vMzRL.png However, I now require splitting this ID into three separate parts as shown here. https://i.stack.imgur.com/iy7ED.png Is there a way to achieve this using react? Bel ...

Sending data as a string in an AJAX request

I have been struggling with this coffeescript function that controls dynamic select boxes. I am trying to pass the content of "modelsSelect" to another script, but for some reason, it's not working as intended. customScript.coffee dynamicSelection = ...

Demonstration of Concurrent Page Processing in Flask

Currently, I am working on an application that heavily utilizes graphics using libraries such as Raphael and graphdracula. The main functionality of the application involves drawing various graphs across different pages named graph1, graph2, and graph3. L ...

What is the correct approach for detecting object collisions in Phaser 3?

Hey everyone, I'm facing a problem and could use some assistance. Currently, I am trying to detect when two containers collide in my project. However, the issue is that the collision is being detected before the objects even start moving on screen. It ...

Combining Gulp and Bower seamlessly with Django to enhance AngularJS functionality

I'm a beginner in Django and I'm trying to set up an AngularJS template with Django. The AngularJS template I am using has gulp configuration. Can someone please guide me on how to configure gulp with Django to run the AngularJS template? Any sug ...

What is the correct way to define a function parameter when using AngularJS Emit?

I've been exploring the emit feature in AngularJS and had a question about passing a function as an argument. In the Parent Controller: $scope.$on("getChildFunction", function(event, func) { console.log("The function is...", func); }) In the Ch ...

The crosshair functionality in Zing Chart is causing a CPU leak

After enabling the crosshair feature on my chart, I noticed a significant issue when using Chrome 57 (and even with versions 58 and ZingChart 2.6.0). The CPU usage spikes above 25% when hovering over the chart to activate the crosshair. With two charts, th ...

What could be causing my node.js to fail in producing a true result within the return statement?

I've encountered an issue with VS code where the return true command is not displaying anything in my terminal, while console.log(map[arr2[j]]) successfully returns true. I'm unsure if this problem lies with node or my terminal. How can I ensure ...

Displaying text underneath an image

Hey everyone, I'm currently working on getting some text to show up below an image using Bootstrap 3. Here's what I have so far: <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"><img alt="my image" class="img-about" ...

distinct identifier for an HTML element that is compatible across all web browsers

Is there a specific identifier for HTML tags on a webpage? I noticed Mozilla uses uid, but is it compatible with all browsers? (I'm not concerned about IE6...) I've come across Unique identifier for HTML elements but they didn't mention t ...

Retrieve the values of the recently selected options in a multiple selection

I am trying to retrieve the last or most recently selected option value from a dropdown menu. In my Django code, I have attempted the following: <script type="text/javascript> django.jQuery(document).ready(function(){ django ...

Convert your HTML document into a Microsoft Word file and see the total number of pages in

I have been experimenting with creating a Word document using HTML code. Thanks to various examples, I have made some progress. However, I am facing an issue where I cannot get the total number of pages to display as text on the first page of the document. ...

Navigate to a hyperlink using an HTML tag on an Android device

Hi there, I have an HTML string that includes a tag with a href attribute. After setting this HTML string in a text view on Android, I want only the tag with the href attribute to be clickable and redirect to the appropriate link. Can someone please advise ...