困難ですし、やらないで良いです
現在、input 要素や inputmode 属性に入力を半角(Ascii の範囲内)に限定する機能は無いです。
そもそも type="password"
の input 要素であっても、任意の文字が入力できます。一部のブラウザ(Blink系?)と OS の組合せでは、IM(インプットメソッド)が無効にされるようですが、その挙動を別の環境でも再現するのは、かえってアクセシビリティを損ねる可能性があります。過去には IM をコントロールする機能が一部ブラウザに有ったようですが、現在は非推奨となっています。
どうしてもやる場合は、自前で入力方法を構築する(キーボードイベントを扱う、ソフトウェアキーボードを用意する、など)方法はあると思います。しかし、こういった作り込みは「いつもと違う」こと自体がユーザーに不親切となり、成功しない可能性が高いです。
代替案: type="password"
のままで付近に入力内容を表示させる
特にお勧めはしないですが、type="password"
の input 要素の付近にユーザーが入力中のパスワードを表示させる手法があります。これは、input イベントを用いて簡単に実装できます。ただし、入力欄は依然として伏せ字であるため、ユーザーがカーソルを移動しての編集や部分的な選択などを行なうのが難しいままなのがデメリットです。
例: 下の画像は Amazon のモバイル向けサイトでパスワードに ExamplePassword
と入力した場面です。パスワード入力欄の下に、ExamplePassword
と出ているのが入力中の文字列です。