Tricks

Reveal on focus TextInputs

Jun 27, 2022
pxlrbt / Dennis Koch
Form builder

Sometimes, fields may contain sensitive data that should not be shown by default. For TextInputs we can make use of type="password" to hide these sensitive data until the field is focused:

TextInput::make('pin')
->type('password')
->extraInputAttributes([
'x-on:focus' => "\$el.type = 'number'",
'x-on:blur' => "\$el.type = 'password'",
]),

If you need this more often, you can wrap it as a macro and register it in a Service Provider:

TextInput::macro('revealOnFocus', function() {
return $this
->type('password')
->extraInputAttributes([
'x-on:focus' => "\$el.type = 'number'",
'x-on:blur' => "\$el.type = 'password'",
]);
});

And then use this macro for your schema definitions:

TextInput::make('pin')->revealOnFocus()
avatar

It's very nice

Macroable is POWER 👍