Auto-advance example

Developer
Aaron Gustafson
Size
3,328 Kb
Views
48,576
  1. Auto-advance example Previews
  2. Auto-advance example HTML Codes
  3. Auto-advance example CSS Codes
  4. Auto-advance example JS Codes

How do I make an auto-advance example?

Example using auto-advance https://github.com/easy-designs/jquery.easy-field-auto-advance.js. What is a auto-advance example? How do you make a auto-advance example? This script and codes were developed by Aaron Gustafson on 13 August 2022, Saturday.

Auto-advance example Previews
IQ Test

Auto-advance example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Auto-advance example</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> <fieldset>	<legend>Enter three sets of four numbers</legend>	<div class="fake-field">	<label for="one">Set one</label>	<input type="number" id="one" name="one" data-auto-advance-to="two" maxlength="4" autofocus="autofocus" placeholder="1111" />	<label for="two">Set two</label>	<input type="number" id="two" name="two" maxlength="4" data-auto-advance-to="three" placeholder="2222" />	<label for="two">Set three</label>	<input type="number" id="three" name="three" maxlength="4" placeholder="3333"/>	</div>	</fieldset>	<fieldset>	<legend><b>Phone</b></legend>	<ol class="fake-field">	<li class="number tel-area-code">	<label for="gfc-tel-area-code">Area Code</label>	<input type="number" id="gfc-tel-area-code" name="phone-area-code"	length="3" maxlength="3" max="999"	data-auto-advance-to="gfc-tel-exchange" placeholder="212" />	</li>	<li class="number tel-exchange">	<label for="gfc-tel-exchange">Exchange</label>	<input type="number" id="gfc-tel-exchange" name="phone-exchange"	length="3" maxlength="3" max="999"	data-auto-advance-to="gfc-tel-subscriber" placeholder="555" />	</li>	<li class="number tel-subscriber">	<label for="gfc-tel-subscriber">Subscriber Number</label>	<input type="number" id="gfc-tel-subscriber" name="phone-subscriber"	length="4" maxlength="4" max="9999" placeholder="1212" />	</li>	</ol>	</fieldset> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Auto-advance example - Script Codes CSS Codes

@-webkit-viewport { width: device-width;
}
@-moz-viewport { width: device-width;
}
@-ms-viewport { width: device-width;
}
@-o-viewport { width: device-width;
}
@viewport { width: device-width;
}
body { padding: 1em; max-width: 500px;
}
fieldset { border: 0; margin: 0 0 1em; padding: 0;
}
legend { font-weight: bold;
}
.fake-field { border: 1px solid gray; list-style: none; padding: .25em; margin: 0; max-width: 100%;
}
.fake-field li { display: inline;
}
.fake-field label { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
}
.fake-field input { border: 0; width: 3em;
}
.fake-field input::inner-spin-button { display: none;
}
.fake-field input::-webkit-inner-spin-button { display: none;
}
.fake-field input::-moz-inner-spin-button { display: none;
}

Auto-advance example - Script Codes JS Codes

/* Easy Field Auto Advance (c) Aaron Gustafson (@AaronGustafson). MIT License. https://github.com/easy-designs/jquery.easy-field-auto-advance.js */
(function(e,g,f){var b="auto-advance-to",h="[data-"+b+"]",a=e(h),j=c(8,46).concat(c(91,93)).concat(c(112,145));a.on("keydown",function(p){var n=p.which,o=e(this),q=o.val(),l=q.length+1,k=o.attr("maxlength"),m=e("#"+o.data(b));if(e.inArray(n,j)>-1){return}if(o.is("[type=number][maxlength]")&&l>k&&!d(this)){l=m.val().length+1;k=m.attr("maxlength");if(m.is("[type=number][maxlength]")&&l>k){p.preventDefault();return false}i(o,m)}});e("[type=number][maxlength]:not("+h+")").on("keydown",function(o){var m=o.which,n=e(this),p=n.val(),l=p.length+1,k=n.attr("maxlength");if(e.inArray(m,j)<0&&l>k&&!d(this)){o.preventDefault();return false}});function d(k){try{if(typeof k.selectionStart=="number"){return(k.selectionStart>=0&&k.selectionEnd<=k.value.length&&k.selectionEnd-k.selectionStart>0)}else{if(typeof document.selection!="undefined"){var m=document.selection.createRange().text;return(m.length&&k.value.indexOf(m)>-1)}}}catch(l){return false}}function c(m,l){var k=[];do{k.push(m++)}while(m<=l);return k}function i(l,m){var k=g.toLowerCase().match(/i(pad|phone|pod)/);if(k){i=function(){}}else{i=function(n,o){o.focus()}}i(l,m)}}(jQuery,navigator.userAgent));
Auto-advance example - Script Codes
Auto-advance example - Script Codes
Home Page Home
Developer Aaron Gustafson
Username aarongustafson
Uploaded August 13, 2022
Rating 3
Size 3,328 Kb
Views 48,576
Do you need developer help for Auto-advance example?

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
Simple Compact Labels
Pure CSS Modal
Un-doing tables
Easy Couch Mode
Pure CSS knockout arrow
Form Patterns
Visualizing CSS Transforms
Validation rules jQuery plugin
Simple pull quote
Lazy Loading Images
Create amazing video scripts 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!