auto-input-a2f v1.0.5

Installation

With npm :

npm i auto-input-a2f

If you use expressjs :

app.use(express.static('.'));

In your html file :

<!-- In node_modules -->
<script src="/path/to/autoinput.min.js"></script>

Without npm :

<script src="https://pioupia.github.io/auto-input-a2f/autoinput.min.js"></script>

Or non minified :

<script src="https://pioupia.github.io/auto-input-a2f/autoinput.js"></script>

Usage

If you dont want to put all the html code yourself, a function is available in javascript that will create all the code for you in one line.

Init the package :

initAutoInput(options, callback);

The callback is optional, it's if you dont want to assigned an atribute to your button of validation.

If you have verified the a2f code and he's not valid, you can reset all the values with this function :

deleteNumbersCode();

If you want to get the actual a2f code of the user, you can call this function :

getNumbersCode() // => 123456 (String)

HTML

(Only if the createAuto option is not activated)

<input data-a2f type="text" placeholder="0" required>
<input data-a2f type="text" placeholder="0" required>
<input data-a2f type="text" placeholder="0" required>
<input data-a2f type="text" placeholder="0" required>
<input data-a2f type="text" placeholder="0" required>
<input data-a2f type="text" placeholder="0" required>

If you want the plugin to automatically validate the a2f, put on your html element with the onlick eventlistener (only with autoend option activated) :

<button onclick="myFunction()" data-button-validate>Send my A2F code</button>

OR use the callback function like that :

initAutoInput(options, myFunction);

JS

// Without callback
function myFunction(){
  const a2fcode = getNumbersCode(); 
  // -> 123456 (String)
  // Check your a2f code if you want here.
}


// With callback
function myFunction(code){
  // code => 123456 (String)
  // Check your a2f code if you want here.
}

Shortcut

You can use keyboard shortcuts, such as the back or delete key that will allow you to delete the value and go back to the previous box, or use the right arrow to go right, the left arrow to go left, and finally, the one at the top to go to the last box to complete, and the one at the bottom to go to the first box to complete.

Exemple

<div class="container">
  <div data-parent-a2f>
  </div>
  <button id="sendA2F" onclick="myFunctionTest">Send</button>
</div>
<script src="https://pioupia.github.io/auto-input-a2f/autoinput.min.js"></script>

initAutoInput({ createAuto: true }, myFunctionTest);

function myFunctionTest(code){
    if(typeof code !== 'number') code = getNumbersCode();
    console.log(code) // 012345 (String)

    if(!check(code)) return deleteNumbersCode();
}

function check(code){
  return code.length == 6 && code == '012345';
}