Easy Obfuscated Field

Developer
Aaron Gustafson
Size
2,393 Kb
Views
26,312
  1. Easy Obfuscated Field Previews
  2. Easy Obfuscated Field HTML Codes
  3. Easy Obfuscated Field CSS Codes
  4. Easy Obfuscated Field JS Codes

How do I make an easy obfuscated field?

A Demo of jquery.easy-obfuscated-field.js. What is a easy obfuscated field? How do you make a easy obfuscated field? This script and codes were developed by Aaron Gustafson on 13 August 2022, Saturday.

Easy Obfuscated Field Previews
IQ Test

Easy Obfuscated Field - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Easy Obfuscated Field</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>This field will be obfuscated on blur</p>
<p> <label for="username">Username</label> <input name="username" id="username">
</p>
<p>This demo uses <a href="https://github.com/easy-designs/jquery.easy-obfuscated-field.js">jquery.easy-obfuscated-field.js</a> by <a href="http://easy-designs.net">Easy Designs</a></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Easy Obfuscated Field - Script Codes CSS Codes

body { padding: 1em;
}

Easy Obfuscated Field - Script Codes JS Codes

/* Easy Obfuscated Field (c) Aaron Gustafson (@AaronGustafson). MIT License. https://github.com/easy-designs/jquery.easy-obfuscated-field.js */
(function(b){var e="easyObfuscatedField",a=e+"-observing",c={visible_suffix:"-visible"};function d(i,h){var g=i.attr("name"),f=i.clone().hide().attr("name",g).removeAttr("id").removeAttr("required");if(f.is("[pattern]")){f.removeAttr("pattern")}i.attr("name",g+h.visible_suffix).after(f)}b.fn.easyObfuscatedField=function(g){g=b.extend(c,g);var j=b(this),f=j.selector,h=b("body"),i=h.data(a)||[];j.each(function(){d(b(this),g)});if(b.inArray(f,i)>-1){return j}i.push(f);h.on("focus",f,function(){var l=b(this),k=l.attr("name"),n,m;if(k.indexOf(g.visible_suffix)<0){d(l)}n=b("input[name="+k.replace(g.visible_suffix,"")+"]");if(n.length&&(m=n.val())!=""){l.val(m)}}).on("blur",f,function(){var l=b(this),m=l.val(),k;b("input[name="+l.attr("name").replace(g.visible_suffix,"")+"]").val(m);if(m.length>3){m=m.split("");k=m.length-3;while(k--){m[k]="*"}l.val(m.join(""))}}).data(a,i);return j}}(jQuery));
(function(){ $('input').easyObfuscatedField();
}())
Easy Obfuscated Field - Script Codes
Easy Obfuscated Field - Script Codes
Home Page Home
Developer Aaron Gustafson
Username aarongustafson
Uploaded August 13, 2022
Rating 3
Size 2,393 Kb
Views 26,312
Do you need developer help for Easy Obfuscated Field?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron Gustafson (aarongustafson) Script Codes
Name
Auto-advance example
Un-doing tables
Simple pull quote
MQ-based Content-controlled Optional Image Loading
Zoom Layouts v2
Pure CSS knockout arrow
Lazy Loading Images
Simple Compact Labels
Form Patterns
Easy Couch Mode
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!