Input cells for number with the move to the next input cell

JavaScript
1

I have to fill in 6 numbers with the inputs. It is like an OTP input field as one field but I try to separate into 6 input fields.

When the first character is filled in it will move to the next input field. I try to solve this using JavaScript?

2

Okay then, good luck. I look forward to seeing how you progress with this.

3

Hi there toplisek,

ennui set in, so I knocked this up…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f0f0f0;
    font: normal 1em / 150% sans-serif;
    text-align: center;
 }
 
h1 {
    font-size: 1.5em;
    color: #444;
    text-transform: capitalize;
 }
 
#testform {
    display: inline-block;
    padding: 1em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #cff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.4 ), 
	        0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }
#testform input[type=text] {
    width: 2em;
    margin: 0.5em 0;
 }
</style>

</head>
<body>

 <h1>this is an input test </h1>
 
 <form id="testform" action="#">
  <label for="inp1">number 1: </label>
  <input id="inp1" type="text"><br>
  <label for="inp2">number 2: </label>
  <input id="inp2" type="text"><br>
  <label for="inp3">number 3: </label>
  <input id="inp3" type="text"><br>
  <label for="inp4">number 4: </label>
  <input id="inp4" type="text"><br>
  <label for="inp5">number 5: </label>
  <input id="inp5" type="text"><br>
  <label for="inp6">number 6: </label>
  <input id="inp6" type="text"><br>
  <label for="but">add numbers with a: </label>
  <input id="but" type="button" value="click">
 </form>
 
 <script>
( function(  d ) {
   var c = 0,
     but = d.getElementById( 'but' ),
     frm = d.getElementById( 'testform' ),
	 inp = frm.querySelectorAll( 'input[type="text"]' );
	 frm.reset();
	 
   but.addEventListener( 'click',
      function() {
         if ( c < inp.length ) {
              inp[ c ].value = c + 1;
              c ++;
          }
         else {
		       return;
          }
       }, false );

} ( document ) );
</script>

</body>
</html>

It may help to get you started. :winky:

coothead

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.