質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2567閲覧

スマホで全角カナ制限をしたい

TemmeiYamada

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/03/08 09:10

編集2017/03/08 09:15

<input pattern>を使って全角カナ制限をしていたのですが、スマホ(iPhone)では効かないようです。

ですのでJavaScript(jQuery)を使って制御しようと調べてやってみたのですが、アラートは出るものの「非表示にする」をチェックしないと永遠にアラートが出てきます。

これをシンプルに1回だけ表示したいです。
※リロードでリセット

Javascript

1<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script> 2<script> 3function isKana(value) { 4 if ( value == null ) 5 return; 6 if( value.match( /[^ァ-ンヴー \s]+/ ) ) { 7 alert("全角カタカナで入力して下さい。"); 8 return false; 9 } 10 return true; 11} 12 $(function(){ 13 $("#kana").blur(function(){ 14 if ( !isKana($(this).val()) ) 15 { $(this).focus(); } 16 }); 17 }); 18</script>

html

1<form action="hoge.php" method="post" enctype="multipart/form-data"> 2フリガナ※全角カタカナで<input type="text" id="kana" name="フリガナ" /> 3</form>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

onchangeでやるならこうかな?

html

1<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script> 2<script> 3function isKana(value) { 4 if ( value == '' ) { 5 return true; 6 } 7 var replaced = value.replace( /[^ァ-ンヴ ]+/, ''); 8 if( value != replaced ) { 9 alert("全角カタカナで入力して下さい。"); 10 return false; 11 } 12 return true; 13} 14 $(function(){ 15 $("#kana").change(function(){ 16 if ( !isKana($(this).val()) ) 17 { $(this).focus(); } 18 }); 19 }); 20</script> 21 22<form action="hoge.php" method="post" enctype="multipart/form-data"> 23フリガナ※全角カタカナで<input type="text" id="kana" name="フリガナ" /> 24</form>

あとは、yambejpさんのおっしゃる通り、javascriptをOFFったりするなどで通せてしまうので
サーバサイドでもチェックが必要です。

投稿2017/03/08 09:49

clickmaker

総合スコア200

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TemmeiYamada

2017/03/09 01:09

まさにこれです! スマホでも確認しました。 スマホがほぼメインなのでjavascriptをOFFにする人はめったにいないものと想定してます。 助かりました。本当にありがとうございました!!
guest

0

わざわざアラートせずにonchangeでかな以外を削除してしまえばいいのでは?
いずれにしろjavascriptは入力補助でしかないので
効かないブラウザは存在します。
めんどうでも受け取った側でも同様のチェックをおこない
必要に応じてエラーを表示したり再入力を促したりしてください

投稿2017/03/08 09:18

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TemmeiYamada

2017/03/09 01:09

ご回答ありがとうございました。 ド素人なもので、書き方も分からず、@clickmakerさんの例を参考にさせていただきました。
guest

0

pattern属性 とか。

<input type="text" id="kana" name="f" title="全角カタカナで入力して下さい。" pattern="^[ァ-ンヴー\s ]+$" /> ```**動くサンプル:**[https://jsfiddle.net/wxefd4yu/2/](https://jsfiddle.net/wxefd4yu/2/) --- 【input 要素 - HTML | MDN】 [https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#attr-pattern](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#attr-pattern) 【Can I use... Support tables for HTML5, CSS3, etc】 [http://caniuse.com/#feat=input-pattern](http://caniuse.com/#feat=input-pattern) 【HTML5におけるinput要素のpattern、type属性のおさらい - Qiita】 [http://qiita.com/ka215/items/795a179041c705bef03b](http://qiita.com/ka215/items/795a179041c705bef03b) 【pattern属性 ≪ input要素 ≪ フォーム ≪ 要素 ≪ HTML5入門】 [http://html5.cyberlab.info/elements/forms/input-pattern.html](http://html5.cyberlab.info/elements/forms/input-pattern.html)

投稿2017/03/08 10:51

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TemmeiYamada

2017/03/09 01:11

ご回答ありがとうございます。 pattern属性は質問にも書いてある通りスマホでは効かないので 仕方なく他の方法を探していたのです。 それでJavascriptを使う方法で考えてました。 でもPCだとpattern属性いろいろ便利ですよね。
kei344

2017/03/09 04:01

すいません、見落としていました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問