91340


JavaScriptでパスワードの表示/非表示を切り替える機能（最近よく見かける目玉マークをクリックして切り替える機能）を作成中なのですが、ネットに出てくる実装方法だと表示中に全角文字が入力できてしまいます。

[code]

    input.type = 'password'; //非表示にする場合
    input.type = 'text';     //表示する場合 ※これだと全角文字が入力できてしまう
    
[/code]

そのため、質問内容としては「テキスト入力を半角文字だけにするには？」ということになるかもしれませんが、  
ぜひ普段実装されている方法を教えてください。よろしくお願いいたします。


CC BY-SA 4.0
2022-09-27T08:31:51.993
91333
2022-09-27T23:36:24.880
2022-09-27T23:36:24.880
3054
36202
question
javascript html form
入力中のパスワードを表示させつつ半角文字だけに制限したい


### 困難ですし、やらないで良いです

現在、[input 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input)や
[inputmode
属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/inputmode)に入力を半角（Ascii
の範囲内）に限定する機能は無いです。

そもそも `type="password"` の input 要素であっても、任意の文字が入力できます。一部のブラウザ（Blink系？）と OS
の組合せでは、IM（インプットメソッド）が無効にされるようですが、その挙動を別の環境でも再現するのは、かえってアクセシビリティを損ねる可能性があります。過去には
IM をコントロールする機能が一部ブラウザに有ったようですが、現在は非推奨となっています。

どうしてもやる場合は、自前で入力方法を構築する（キーボードイベントを扱う、ソフトウェアキーボードを用意する、など）方法はあると思います。しかし、こういった作り込みは「いつもと違う」こと自体がユーザーに不親切となり、成功しない可能性が高いです。

### 代替案: `type="password"` のままで付近に入力内容を表示させる

特にお勧めはしないですが、`type="password"` の input
要素の付近にユーザーが入力中のパスワードを表示させる手法があります。これは、[input
イベント](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event)を用いて簡単に実装できます。ただし、入力欄は依然として伏せ字であるため、ユーザーがカーソルを移動しての編集や部分的な選択などを行なうのが難しいままなのがデメリットです。

例: 下の画像は Amazon のモバイル向けサイトでパスワードに `ExamplePassword`
と入力した場面です。パスワード入力欄の下に、`ExamplePassword` と出ているのが入力中の文字列です。

>
> [![Amazonのモバイル向けログインフォーム](https://i.stack.imgur.com/0Ds0K.png)](https://i.stack.imgur.com/0Ds0K.png)


CC BY-SA 4.0
2022-09-27T23:09:56.830
91340
2022-09-27T23:34:41.920
2022-09-27T23:34:41.920
3054
3054
91333
answer