ちょっと良いUIおれおれAdvent Calendar 2024 – 23日目
入力内容を検証して結果を可視化すると実行前に誤りが検出できて便利なんですが、まだ入力してる途中なのに怒られるのなんか嫌ですよね。いまやろうとおもってたのに！
debounce() を使う
JavaScript の場合は debounce して操作が一段落するまで処理を遅延させます。
debounce は標準 API ではなく、よくあるアイディアです。何か引き金となるイベントが発生したら、即時反応する代わりに一定時間待ってから処理を実行するようにします。待機中に同じイベントが再度発生した場合は待機時間を 0 に戻し改めて待ちます。これにより元のイベントの連続発火が収まってから処理を実行することができます。
- Lodash Documentation –
_.debounce(func, [wait=0], [options={}]) - debounce | es-toolkit –
debounce - lodash 互換の debounce と throttle だけを提供するライブラリを作った – hokaccha memo (2021)
待機中に待機を表示するか表示を維持するかは悩みどころ。
:invalid は :user-invalid に
CSS でやってる場合は疑似クラス :user-invalid を利用します。:invalid は入力途中で反応しちゃったんだけどそこらへんが改善されてます。
ちなみに色だけ変わっても何が悪いのかわからんので併せて JS でメッセージを表示するなりしてくれるとありがたいです。頼むぞ。（色を変えるなという話ではありません。）
おしまい
あんまりぴこぴこしないでほしい。