半角全角の入力を制御する
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
[[jQueryめも]]
cssで ime-mode: disabled; を指定すればInternet Explorerや...
*方法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...
});
this.value = halfVal.replace(/”/g, "\"")
.replace(/’/g, "'")
.replace(/‘/g, "`")
.replace(/¥/g, "\\")
.replace(/ /g, " ")
.replace(/〜/g, "~");
});
});
終了行:
[[jQueryめも]]
cssで ime-mode: disabled; を指定すればInternet Explorerや...
*方法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...
});
this.value = halfVal.replace(/”/g, "\"")
.replace(/’/g, "'")
.replace(/‘/g, "`")
.replace(/¥/g, "\\")
.replace(/ /g, " ")
.replace(/〜/g, "~");
});
});
ページ名: