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.
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.
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.
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>When attempting to utilize virtual populate between two models that I've created, the goal is to retrieve all reviews with the tour id and display them alongside the corresponding tour. This is achieved by using query findById() to specifically show o ...
I've just embarked on creating my first phonegap application using an HTML5 mobile website template. After deploying it, I noticed that the external links are not working within the app. Clicking on a link doesn't seem to do anything. To addres ...
As I transition from using the params hash in Rails to learning Node/Express, I find myself confused about how it all works. The Express.js documentation provides some insight: 'This property is an array containing properties mapped to the named rout ...
I am currently implementing a multi-search feature for a single table The search functionality is functioning correctly but only for one column Here is the snippet from my controller: public function index() { return Matter::when(request('sear ...
Ng2-datepicker (1.0.6) Angular2 (2.0.0-rc.5) As I attempted to implement it in my HTML following the documentation, I encountered the following error: zone.js:484 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngMode ...
In my App.js file, I have the following code: const getPlayers = async()=>{ const players = await API.getPlayers(); setPlayers(players) } getPlayers() The following code is from my API.js file: const getPlayers = async() => { return getJson( ...
To organize my project, I decided to create a folder named workers. Inside this folder, I followed these steps: Firstly, I initiated the project using npm init. Next, I installed @cloudflare/wrangler by running npm i @cloudflare/wrangler. This action resul ...
Many highload websites are able to notify their users of new messages or topics in real-time without the need for page refreshing. How do they achieve this and what approaches are commonly used? There appear to be two main methods: Continuously querying ...
I have set the height to auto, however I am observing that small thumbnail images are being momentarily stretched vertically in Internet Explorer 6 before adjusting to their correct height. It is worth mentioning that the image tag in the HTML appears as ...
async.waterfall([1,2,3,4].map(function (arrayItem) { return function (lastItemResult, nextCallback) { // performing the same operation for each item in the array var itemResult = (arrayItem+lastItemResult); // pa ...
I have an array containing values that I want to write to a text file using the following code. while(filedataarr.length>0) { firstelement = filedataarr.shift(); //console.log(firstelement); fs.appendFile("D:\\Temp& ...
Currently, I am delving into jQuery and have stumbled upon a section that perplexes me. Due to my lack of familiarity with the terminology, conducting an effective Google search has proven difficult. Therefore, I decided to craft this question to elucidate ...
I've been struggling with this problem for quite some time now and I could really use some guidance from experts here on SO. Essentially, what I am trying to achieve is to locate a specific document using a provided _id, and then execute a conditional ...
Attempting to utilize my model for displaying and locating users in MongoDB has hit a snag. Upon importing it into profile.js and launching my app, an error is thrown: Cannot read properties of undefined (reading 'Users') https://i.stack.imgur.c ...
I am attempting to generate an array in JavaScript with unique elements extracted from a JSON feed. My thought process is possibly too influenced by PHP, where a simple script like the one below would suffice: $uniqueArray = array(); foreach($array as $ke ...
Explore this example CSS code: /* animations at the start */ .error-animation.ng-enter { -webkit-transition: 0.5s linear all; transition: 0.5s linear all; opacity: 0; } ...
Have you ever noticed a font style change in the background text when applying CSS3 animations for opacity and scale transforms? I have some text content on my page, including a "Click me" link that triggers a popup with a CSS3 animation. However, I'v ...
This is a demonstration of a lightbox feature. You can find the code here. When you click on the link "Show Panel," a form will pop out. It works correctly in Firefox but not in IE9. The HTML code is simple: <body> <a id="show-panel" href="#"&g ...
I am looking for a way to incorporate a JavaScript selectionchange event on a specific div element. The goal is to display a highlighter box when the user selects text from the DOM. I was able to achieve this functionality for web using an onmouseup event, ...
Below is the structure of my html ajax form: <form name="vafForm" id="vafForm" method="GET" action="urlfor ajax"> <input type="hidden" value="0" id="vafProduct"> <select class="catSelect {prevLevelsIncluding: 'cat'} c ...