input[type="number"] のマウスホイール事故を防ぎたい
Leaner Technologies エンジニアのぐりこ( @glico800 ) です。 今回は何かと話題に上がりがちな input[type="number"] について、個人的に新しい発見があったので簡単にまとめてみました！ 背景 ユーザーから入力した値と保存されている値が違うとのお問い合わせがあり、「そんなはずは…。」と思って調べてみたところ、 input[type="number"] の入力後にマウスホイール操作でページ下部にある保存ボタンに移動する際に入力値が意図せず変更されてしまっていたことが発覚。 「これは気づけない！」ということでなんとかしたい。 やりたいこと input[type="number"] でマウスホイール操作による入力値の変更をできないようにする。 前提 今回はPC版Chrome バージョン: 114.0.5735.198 で表示したケースを想定 実装方針
![input[type="number"] のマウスホイール事故を防ぎたい](https://cdn-ak-scissors.b.st-hatena.com/image/square/f071e739989a84c42a6d8297cc7db79c948cfa6d/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--1MFn4Qlb--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Ainput%25255Btype%25253D%252522number%252522%25255D%252520%2525E3%252581%2525AE%2525E3%252583%25259E%2525E3%252582%2525A6%2525E3%252582%2525B9%2525E3%252583%25259B%2525E3%252582%2525A4%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E4%2525BA%25258B%2525E6%252595%252585%2525E3%252582%252592%2525E9%252598%2525B2%2525E3%252581%25258E%2525E3%252581%25259F%2525E3%252581%252584%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Aglico%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhhNjFkZTAyMDUuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252583%2525AA%2525E3%252583%2525BC%2525E3%252583%25258A%2525E3%252583%2525BC%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUxN2FhMGEyNTEuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
iOS17でSafariに追加される9つの新機能 - iPhone Mania
iOS17では、iPhoneの標準ブラウザであるSafariも、便利で安全に使うための新機能が追加されて進化します。米メディアMacRumorsが、Safariの進化ポイント9つをまとめているのでご紹介します。プライバシー保護関連の機能が特に充実しています。 ※記事中の機能や使用しているスクリーンショットは、取材に基づく特別な許可に基づき使用しています。機能やデザインは、iOS17パブリックベータのものであり、正式版では変更される可能性がありますのでご了承ください。 ■3行で分かる、この記事のポイント 1. iOS17で進化するSafariの新機能をまとめた。 2. プロファイルの切り替えは、用途別にお気に入りなどを使い分け可能。 3. プライベートブラウズを開くには生体認証が必要に。 iPhoneの標準ブラウザ、Safariが進化 iOS17では、iPhoneの標準ブラウザであるSafa
Google の｢ダークウェブ レポート｣が日本でも利用可能になりました | HelenTech
Google One メンバーシップに加入しているユーザー(課金ユーザー)が、プロフィールを設定することでモニタリングし、ユーザーの様々な情報がダークウェブに漏洩されているかどうかを検出できる｢ダークウェブ レポート｣が日本国内でも利用可能になりました。 なお、この機能は一般ユーザー向けのGoogleアカウントが必要で、Google Workspace アカウントや管理対象のアカウントではダークウェブ レポートを利用することができません。また一部の機能を利用するためには有料のGoogle One メンバーシップに加入する必要があります。 自分の個人情報が漏洩していないか、常にダークウェブをモニタリングする メールアドレス以外の情報の結果を確認する 新しい結果の通知 ｢ダークウェブ レポート｣を利用するには、Google アカウントの管理画面から[セキュリティ] > [ダークウェブ レポート
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
