Eye protected input

Requirements:

• jQuery
• Font ADX

Protected input with eye icon

Allows you to switch the visibility of the field by clicking on the eye icon

Ajax input with eye

To load data with ajax

Readonly plain text with eye icon

For readonly components

Custom events

You can set event methods with parameters:

• onEyeClick: event on eye click
• onShow: before showing the value
• onProtect: before protecting value
• onLoad: before ajax loading

or by subscribing to element events:

• click.adx.protected-input: event on eye click
• show.adx.protected-input: before showing the value
• shown.adx.protected-input: after showing the value
• protect.adx.protected-input: before protecting value
• protected.adx.protected-input: after protecting value
• load.adx.protected-input: before ajax loading
• loaded.adx.protected-input: after ajax loading

$('.with-eye-custom').protectedInput({
    onShow: function () {
        if (!confirm('Show this password?')) {
            return false;
        }
    }
});
        

$('#psw-custom-color').on('click.adx.protected-input', function (e) {
    $(e.currentTarget).css('background', colors[Math.floor(Math.random()*colors.length)]);
});
        

$('#psw-custom-question').on('show.adx.protected-input', function (e) {
    var answer = prompt('Type anything');

    if (answer === null) {
        e.preventDefault();
    } else {
        $(e.currentTarget).protectedInput('setValue', answer)
    }
});
        

Custom methods