長押し確認ボタン
この長押し確認ボタンは、押し続けている間だけバーが伸び、一定時間（初期は 1500 ミリ秒）を超えると操作が確定する UI です。誤タップで取り返しのつかない操作が起きないよう、削除などの重要な動作にワンクッション置く狙いがあります。
解説
この長押し確認ボタンは、押し続けている間だけバーが伸び、一定時間（初期は 1500 ミリ秒）を超えると操作が確定する UI です。誤タップで取り返しのつかない操作が起きないよう、削除などの重要な動作にワンクッション置く狙いがあります。JavaScript は pointerdown で計測を開始し、requestAnimationFrame で経過割合を計算してバー幅を更新します。途中で指やマウスを離すと pointerup でリセットされ、確定しません。
使う場面
- アカウント削除やデータ消去など、誤操作を避けたい確定ボタン
- 確認ダイアログの代わりに、長押しで意思確認したいとき
- タッチ操作中心のアプリで、確認手順を 1 アクションにまとめたいとき
必要時間は HTML の data-dur 属性で変えられます。短くすると確定しやすく、長くすると慎重さが増します。バーの色は半透明の白で描いているので、ボタンの地色に合わせて調整してください。pointer 系イベントを使うため、タッチとマウスの両方で同じように動きます。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
長押しの必要時間は変えられますか？
はい。ボタンの data-dur 属性にミリ秒で指定します。たとえば 2000 にすれば 2 秒間押し続けないと確定しません。短くすれば素早く、長くすれば慎重な確認になります。
スマホとパソコンの両方で動きますか？
動きます。pointerdown と pointerup というポインタ系のイベントを使っているため、タッチ操作の指でもマウスのクリックでも、同じように押している間だけバーが進みます。