- ベストアンサー
Webフォームのテキストボックスで半角指定は可能か
- Webフォームのテキストボックスで半角指定は可能か
- Webフォームのテキストボックスをクリックしてアクティブにするだけで、半角にしたいです。全角文字を入力していたらエラーを返すことならば可能で、それはよく見るけど、それじゃ弱い。それよりは、強制的に半角に切り替えたいです。あるいは、数字指定を徹底して、Alphabetの入力を受け付けないようにしたいです。
- Webフォームやエクセルでの半角指定についての方法を教えてください。Webフォームでは、半角数字の指定や全角入力時の自動切り替えを行うことで、入力エラーや処理の遅れを防ぐことができます。特に、Web申請などの場面では重要な要素です。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
JavaScriptを用いた実装例は次のようになります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テキストボックス</title> </head> <body> <form action="#" method="post"> <p>ＡＢＣコード（半角数字７桁）<br> <input type="text" name="address" size="7"> </p> <p><input type="button" value="確認" id="button2"></p> </form> <script> document.querySelector('[name=address]').addEventListener('input', function (evt) { // 文字削除の場合は何もしない if (evt.inputType.indexOf('deleteContent') > -1) { return false; } // 数字以外を削除 const inputValue = this.value.replace(/[^０-９0-9]/g, ''); // 入力値を半角数字に変換 this.value = Array.from(inputValue).map((value) => { if (/[０-９]/.exec(value) !== null) { // 全角数字を半角数字に変換 return String.fromCharCode(value.charCodeAt(0) - 65248); } // 半角数字の場合はそのまま返す return value; }).join(''); }); </script> </body> </html> 実用上はもう少し例外処理を追加する必要がありますが、基本的にはこの方法で可能です。
その他の回答 (1)
- dell_OK
- ベストアンサー率13% (766/5722)
数字だけならこちらで。 <input type="number"> 他のテキストボックスで全角モードにしておいてから、 ここに移動すると半角モードになります。 ここで全角モードにできますが、 入力したものはキャンセルされます。 ブラウザによって動作が異なるかも知れませんが、 GoogleChromeでは今のところこうなっています。
お礼
さんきゅー
お礼
さんきゅー