Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 13, 2017 08:49
Show Gist options
  • Save anonymous/ac20e013f6f66630d458c276c5353ac8 to your computer and use it in GitHub Desktop.
Save anonymous/ac20e013f6f66630d458c276c5353ac8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/melununite
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
* {
margin: 0;
padding: 0;
}
.box {
float: left;
margin: 50px 10px;
position: relative;
width: 30px;
height: 30px;
border-bottom: 5px solid #fcc;
}
input {
border: 0;
position: absolute;
top: 0;
left: 0;
z-index:999;
width: 100%;
height: 100%;
text-align: center;
background: transparent;
opacity: 0;
}
input:focus {
outline: 0;
}
input:valid {
opacity: 1;
}
input:focus ~ .circle,
input:valid ~ .circle {
display: none;
}
.circle {
position: absolute;
top: 5px;
left: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fcc;
}
</style>
</head>
<body>
<div class="box">
<input type="text" maxlength="1" required="required">
<div class="circle"></div>
</div>
<div class="box">
<input type="text" maxlength="1" required="required">
<div class="circle"></div>
</div>
<div class="box">
<input type="text" maxlength="1" required="required">
<div class="circle"></div>
</div>
<div class="box">
<input type="text" maxlength="1" required="required">
<div class="circle"></div>
</div>
<div class="box">
<input type="text" maxlength="1" required="required">
<div class="circle"></div>
</div>
<script id="jsbin-javascript">
const nodes = document.querySelectorAll('.box>input')
Array
.from(nodes)
.map(item => {
item.addEventListener('keypress', () => {
const nextElement = item.parentNode.nextElementSibling.children[0]
if (nextElement) {
nextElement.focus()
}
})
})
</script>
<script id="jsbin-source-css" type="text/css">* {
margin: 0;
padding: 0;
}
.box {
float: left;
margin: 50px 10px;
position: relative;
width: 30px;
height: 30px;
border-bottom: 5px solid #fcc;
}
input {
border: 0;
position: absolute;
top: 0;
left: 0;
z-index:999;
width: 100%;
height: 100%;
text-align: center;
background: transparent;
opacity: 0;
}
input:focus {
outline: 0;
}
input:valid {
opacity: 1;
}
input:focus ~ .circle,
input:valid ~ .circle {
display: none;
}
.circle {
position: absolute;
top: 5px;
left: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fcc;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">const nodes = document.querySelectorAll('.box>input')
Array
.from(nodes)
.map(item => {
item.addEventListener('keypress', () => {
const nextElement = item.parentNode.nextElementSibling.children[0]
if (nextElement) {
nextElement.focus()
}
})
})
</script></body>
</html>
Raw
jsbin.melununite.css
* {
margin: 0;
padding: 0;
}
.box {
float: left;
margin: 50px 10px;
position: relative;
width: 30px;
height: 30px;
border-bottom: 5px solid #fcc;
}
input {
border: 0;
position: absolute;
top: 0;
left: 0;
z-index:999;
width: 100%;
height: 100%;
text-align: center;
background: transparent;
opacity: 0;
}
input:focus {
outline: 0;
}
input:valid {
opacity: 1;
}
input:focus ~ .circle,
input:valid ~ .circle {
display: none;
}
.circle {
position: absolute;
top: 5px;
left: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fcc;
}
Raw
jsbin.melununite.js
const nodes = document.querySelectorAll('.box>input')
Array
.from(nodes)
.map(item => {
item.addEventListener('keypress', () => {
const nextElement = item.parentNode.nextElementSibling.children[0]
if (nextElement) {
nextElement.focus()
}
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment