The mod.one_time_password() method automatically attaches event listeners for all <div class="mod-one-time-password"></div> tags on the page and handles interaction events for the elements.
Method API
// Using mod(-plus).iife.min.js
window.mod.one_time_password(options: object);
// Using mod(-plus).esm.min.js
import { one_time_password } from 'path/to/mod(-plus).esm.min.js';
one_time_password(options: object);Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
One Time Password HTML
<div class="mod-one-time-password-input">
<div class="mod-one-time-password-input-group">
<input type="text" class="mod-input" />
<input type="text" class="mod-input" />
<input type="text" class="mod-input" />
</div>
<i class="mod-one-time-password-separator mod-icon-minus"></i>
<div class="mod-one-time-password-input-group">
<input type="text" class="mod-input" />
<input type="text" class="mod-input" />
<input type="text" class="mod-input" />
</div>
</div>One Time Password JavaScript
window.mod.one_time_password({
events: {
on_filled: (one_time_password = '') => {
console.log({ one_time_password });
},
}
});API
- options object
-
Configuration options for the one-time password input.
- events object
-
Event callbacks for one-time password actions.
- on_filled function
- Callback function triggered when all input fields are filled. Receives (one_time_password) as parameter, where one_time_password is the concatenated string of all input values.