Tricks

TextInput 聚焦显示

Jul 2, 2022
Martin
Admin panel

有时候,字段中可能包含了敏感数据,默认情况下你不想展示。对于 TextInput,我们可以使用 type="password" 来隐藏敏感信息,除非焦点在该字段中:

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

如果你对此有较为频繁的需求,你在服务提供者中可以使用 macro 对其进行包装并注册:

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

 
然后你就可以这样使用这一 macro 了:
 
```php
TextInput::make('pin')->revealOnFocus()