Dot Digit Input

Developer
Godje
Size
4,156 Kb
Views
56,672
  1. Dot Digit Input Previews
  2. Dot Digit Input HTML Codes
  3. Dot Digit Input CSS Codes
  4. Dot Digit Input JS Codes

How do I make an dot digit input?

The nice input with dots that you fill. One of my YouTube subscribers asked me how to do that you can find that on some websites this cool thing. And I was wondering how they do that. Some messed up tricks and wacks and we got this. It also works on the phone. What is a dot digit input? How do you make a dot digit input? This script and codes were developed by Godje on 12 September 2022, Monday.

Dot Digit Input Previews
IQ Test

Dot Digit Input - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dot Digit Input</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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>
<div class="container"> <h1>Dot digit input</h1> <p>Type the code that you received in your e-mail below:</p> <div class="inputs" id="inputs"> <input maxlength="2" placeholder="•" value=""/> <input maxlength="2" placeholder="•" value=""/> <input maxlength="2" placeholder="•" value=""/> <input maxlength="1" placeholder="•" value=""/> </div>
</div> <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dot Digit Input - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
body { background-color: #2980b9; background-image: -webkit-linear-gradient(45deg, #20638f, #3498db); background-image: linear-gradient(45deg, #20638f, #3498db); background-size: 100%; background-position: 0 0; background-attachment: fixed; padding: 10px; height: 100vh; color: #fff; font-family: "Open Sans", sans-serif; box-sizing: border-box;
}
input::-webkit-input-placeholder { color: #8bc4ea !important;
}
input:-moz-placeholder { color: #8bc4ea !important;
}
input::-moz-placeholder { color: #8bc4ea !important;
}
input:-ms-input-placeholder { color: #8bc4ea !important;
}
.container { width: 90%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.container p { font-size: 24px; font-weight: 100;
}
.container h1 { font-size: 32px; font-weight: 600;
}
.inputs input { width: 50px; height: 60px; line-height: 100%; background-color: transparent; border: 0; outline: 0; color: white; font-size: 60px; word-spacing: 0px; overflow: hidden; text-align: center;
}

Dot Digit Input - Script Codes JS Codes

function processInput(holder){	var elements = holder.children(), //taking the "kids" of the parent	str = ""; //unnecesary || added for some future mods	elements.each(function(e){ //iterates through each element	var val = $(this).val().replace(/\D/,""), //taking the value and parsing it. Returns string without changing the value.	focused = $(this).is(":focus"), //checks if the current element in the iteration is focused	parseGate = false;	val.length==1?parseGate=false:parseGate=true;	/*a fix that doesn't allow the cursor to jump	to another field even if input was parsed	and nothing was added to the input*/	$(this).val(val); //applying parsed value.	if(parseGate&&val.length>1){ //Takes you to another input	var	exist = elements[e+1]?true:false; //checks if there is input ahead	exist&&val[1]?( //if so then	elements[e+1].disabled=false,	elements[e+1].value=val[1], //sends the last character to the next input	elements[e].value=val[0], //clears the last character of this input	elements[e+1].focus() //sends the focus to the next input	):void 0;	} else if(parseGate&&focused&&val.length==0){ //if the input was REMOVING the character, then	var exist = elements[e-1]?true:false; //checks if there is an input before	if(exist) elements[e-1].focus(); //sends the focus back to the previous input	}	val==""?str+=" ":str+=val;	});
}
$("#inputs").on('input', function() {processInput($("#inputs"))}); //still wonder how it worked out. But we are adding input listener to the parent... (omg, jquery is so smart...);
$("#inputs").on('click', function(e) { //making so that if human focuses on the wrong input (not first) it will move the focus to a first empty one.	var els = $(this).children(),	str = "";	els.each(function(e){	var focus = $(this).is(":focus");	$this = $(this);	while($this.prev().val()==""){	$this.prev().focus();	$this = $this.prev();	}	})
});
Dot Digit Input - Script Codes
Dot Digit Input - Script Codes
Home Page Home
Developer Godje
Username Godje
Uploaded September 12, 2022
Rating 4
Size 4,156 Kb
Views 56,672
Do you need developer help for Dot Digit Input?

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!

Godje (Godje) Script Codes
Name
Cute carnival lights
A Pen by Godje
Fancy Background shapes
FIRE
Archimedean Spiral
Ceasar Cipher Encryptor
Shoal of Pursuers
Just SMILE
Just a simplest particle canvas
Color Chaos
Create amazing sales emails 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!