半角全角の入力を制御する
の編集
https://yassu.jp/pukiwiki/index.php?%C8%BE%B3%D1%C1%B4%B3%D1%A4%CE%C6%FE%CE%CF%A4%F2%C0%A9%B8%E6%A4%B9%A4%EB
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
[[jQueryめも]] cssで ime-mode: disabled; を指定すればInternet ExplorerやFirefoxは制御できますが、Chromeは言うことを聞いてくれません。 *方法1 [#ba43c5c3] HTML5ではinput typeに電話番号入力欄を作成するtelが指定できます。~ 数字やハイフン程度しか入力できないイメージがありますが、英字も入力できてしまいます。~ なのでこの機能を流用します。 通常はinput typeはtextでime-mode: disabled;としておく。~ Chromeであればinput typeをtelに変更してしまう。 <style> #username { ime-mode: disabled; } </style> <script> $(function() { var agent = window.navigator.userAgent.toLowerCase(); if (agent.indexOf('chrome') != -1) { document.getElementById('username').type = 'tel'; } }); </script> <form method="post" action="/"> <input type="text" name="username" id="username"> <input type="submit" value="送信"> </form> *方法2 [#n5bab678] classにalphanumericを指定し、JavaScriptにて全角から半角へ変換を行います。 $(function() { $('.alphanumeric').css('ime-mode', 'disabled'); $('.alphanumeric').on('keyup', function(){ var halfVal = this.value.replace(/[!-〜]/g, function(tmpStr) { return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0); }); this.value = halfVal.replace(/”/g, "\"") .replace(/’/g, "'") .replace(/‘/g, "`") .replace(/¥/g, "\\") .replace(/ /g, " ") .replace(/〜/g, "~"); }); });
タイムスタンプを変更しない
[[jQueryめも]] cssで ime-mode: disabled; を指定すればInternet ExplorerやFirefoxは制御できますが、Chromeは言うことを聞いてくれません。 *方法1 [#ba43c5c3] HTML5ではinput typeに電話番号入力欄を作成するtelが指定できます。~ 数字やハイフン程度しか入力できないイメージがありますが、英字も入力できてしまいます。~ なのでこの機能を流用します。 通常はinput typeはtextでime-mode: disabled;としておく。~ Chromeであればinput typeをtelに変更してしまう。 <style> #username { ime-mode: disabled; } </style> <script> $(function() { var agent = window.navigator.userAgent.toLowerCase(); if (agent.indexOf('chrome') != -1) { document.getElementById('username').type = 'tel'; } }); </script> <form method="post" action="/"> <input type="text" name="username" id="username"> <input type="submit" value="送信"> </form> *方法2 [#n5bab678] classにalphanumericを指定し、JavaScriptにて全角から半角へ変換を行います。 $(function() { $('.alphanumeric').css('ime-mode', 'disabled'); $('.alphanumeric').on('keyup', function(){ var halfVal = this.value.replace(/[!-〜]/g, function(tmpStr) { return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0); }); this.value = halfVal.replace(/”/g, "\"") .replace(/’/g, "'") .replace(/‘/g, "`") .replace(/¥/g, "\\") .replace(/ /g, " ") .replace(/〜/g, "~"); }); });
テキスト整形のルールを表示する