Auto Input A2F

Allows you to automatically change input once it is filled in. Then validate the form when all inputs are filled in correctly.

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.

Options	Description	Default	Type
autoend	Activates the automatic end. Notify you when the user has completely filled the captcha via the callback or by pressing your element to signal the end.	true	Boolean
selectAuto	Automatically selects the first input to be filled in when the user arrives on the page	true	Boolean
canPast	Allows user to paste a2f code	true	Boolean
createAuto	Automatically creates all the html code required for validation of the a2f.	false	Boolean
parent	Only if the createAuto option is activated. Defines the parent of the automatically generated html code. May not be enabled if and only if the parent contains the attribute : "data-parent-a2f"	get the attribute "data-parent-a2f" OR get the id #a2fParent	HTML element

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';
}