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

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

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

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

jQuery

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

Q&A

解決済

2回答

648閲覧

inputをkeyupしたら実行する関数をload時にも実行したい

igaiga

総合スコア144

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/12/19 05:28

編集2018/12/19 07:53

いつもお世話になっております。

現在、inputをkeyupしたら実行する関数があるのですが、
これをページを開いた際にも実行したいと思います。
inputは複数ある状態です。

現状のソースコード

<form id="contact-form" action="./check.php" method="post" data-validate> <dl class="relative input_set"> <dt><label for="name">ご相談内容</label></dt> <dd><textarea cols="40" rows="8" name="message" id="message" class="voluntary"></textarea><span class="option"></span></dd> </dl> <h3 class="bolder_h3">お客様情報</h3> <dl class="relative input_set"> <dt><label for="name">お名前</label></dt> <dd> <input type="text" name="name" id="name" value="" placeholder="太郎" class="necessary v_required" required> <span class="required"></span> </dd> </dl> <dl class="relative input_set"> <dt><label for="name">メールアドレス</label></dt> <dd> <input type="text" name="mail" id="mail" value="" placeholder="半角英数 (例:info@example.com)" class="necessary v_mail" required> <span class="required"></span> </dd> </dl> <dl class="relative input_set"> <dt><label for="name" required>電話番号</label></dt> <dd> <input type="text" name="tel" id="tel" value="" class="necessary v_phone" required> <span class="required" required></span> </dd> </dl> <div class="btn"> <button type="submit" data-icon="check" class="form_btn" id="send_button">入力内容のご確認</button> </div> </form> </div> </div> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $("select").each(function(){ $(this).on('change', hoge(this)); }); $("textarea,input").each(function(){ $(this).on('keyup', hoge(this)); }); var str; var required; var voluntary; function hoge(elm){ var v, old = elm.value; return function(){ if(old != (v=elm.value)){ old = v; str = $(this).val(); required = $(this).hasClass('v_required'); required = $(this).hasClass('v_required'); required = $(this).hasClass('v_required'); voluntary = $(this).hasClass('voluntary'); v_email = $(this).hasClass('v_mail'); v_phone = $(this).hasClass('v_phone'); var reg_email = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/; var reg_phone = /^(0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4})$/; if(required == true){ if(str == ""){ $(this).removeClass("inputOk"); $(this).addClass("inputError"); $(this).before('<div class="add">必須項目です</div>'); } else { $(this).addClass("inputOk"); $(this).removeClass("inputError"); $(this).prev().remove(); } }else if(voluntary == true){ if(str == ""){ $(this).removeClass("optionOk"); } else { $(this).addClass("optionOk"); } }else if(v_email == true){ if(str == ""){ $(this).removeClass("inputOk"); $(this).addClass("inputError"); $(this).prev(".add").remove(); $(this).before('<div class="add">必須項目です</div>'); }else if(reg_email.test(str)){ $(this).addClass("inputOk"); $(this).removeClass("inputError"); $(this).prev(".add").remove(); } else { $(this).removeClass("inputOk"); $(this).removeClass("inputError"); $(this).prev(".add").remove(); $(this).before('<div class="add">半角数字とハイフンのみご利用できます</div>'); } }else if(v_phone == true){ if(str == ""){ $(this).removeClass("inputOk"); $(this).addClass("inputError"); $(this).prev(".add").remove(); $(this).before('<div class="add">必須項目です</div>'); } else if(reg_phone.test(str)) { $(this).addClass("inputOk"); $(this).removeClass("inputError"); $(this).prev(".add").remove(); } else { $(this).removeClass("inputOk"); $(this).removeClass("inputError"); $(this).prev(".add").remove(); $(this).before('<div class="add">半角数字とハイフンのみご利用できます</div>'); } } } } } </script>

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

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

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

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

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

m.ts10806

2018/12/19 05:41

何が起きたのでしょうか。 > 思ったように動きませんでした。
igaiga

2018/12/19 05:52

すみません。何も起きませんでした。
m.ts10806

2018/12/19 05:53

あ、えっと。そのhoge()でconsole.log()書いて、コンソールを確認すると良いです。
igaiga

2018/12/19 05:55

console.log(this);でみるとWindow {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}と入っていましたのでthisの値はなんかはいってるんだなーというくらいでしょうか。
m.ts10806

2018/12/19 05:56

回答に動作確認方法例を追記しました。おそらくcosole.log()を設置する場所が違いそうです。
igaiga

2018/12/19 06:05

すみません。タグがconsoleに表示されるようになりました。
guest

回答2

0

ベストアンサー

予備知識として、半角区切りで1つのonで複数のイベントが登録可能です。

というより「ロード時に実行したい」のであれば、
むしろdocumentのロードですね。

あとkeyupの方はeachでまわさずとも下記で良いように思います。

js

1$(function(){ 2 $("input").each(function(){ 3 hoge(this); 4 }); 5 $("input").on("keyup",function(){ 6 hoge(this); 7 }); 8});

動作確認方法例(デバッグ):

js

1function hoge(e){ 2 console.log(e); 3}

で、ブラウザのデベロッパーツールのコンソールに渡したinputの情報が出力されるタイミングを確認します。

投稿2018/12/19 05:45

編集2018/12/19 05:55
m.ts10806

総合スコア80765

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

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

igaiga

2018/12/19 06:03

ありがとうございます。差し替えてみましたが動きませんでした。inputが複数あってもeachはいらないのでしょうか。
m.ts10806

2018/12/19 06:05

jQueryのバージョンでしょうか。 私のほうでは3.3.1ですが、きちんとload,keyup共に動いています。 念のためhtml全体もご提示いただけると再現確認もしやすくなります。 this(動作が発生した自身)を利用するのでeachはむしろ不要と思います。
igaiga

2018/12/19 06:06

すみません。タグが表示されるようになりました。
m.ts10806

2018/12/19 06:08

「タグが表示」がコンソールであれば正しい動作です。
igaiga

2018/12/19 06:59

ありがとうございます。一歩前進できました! 下記が現状のコードでしたが、そのままでも毎回load時に実行されていたようです。 ------------------------- $("select").each(function(){ $(this).on('change', hoge(this)); }); $("textarea,input").each(function(){ $(this).on('keyup', hoge(this)); }); ------------------------- 以下のように変更しましたが、なぜか今まで動いていた部分も動きませんでした。 ------------------------- $("textarea,input").on("keyup",function(){ hoge(this); }); $("select").on("change",function(){ hoge(this); });
m.ts10806

2018/12/19 07:02

再掲: 念のためhtml全体もご提示いただけると再現確認もしやすくなります。 もし、HTMLの記述よりも順番的に上に書かれているのでしたら下記で囲うか $(function(){ }); </body>の直前におけば良いかと。
igaiga

2018/12/19 07:58

すみません。HTMLを記載しました。 入力チェック済みの場合はclassが振られるようになっているのですが、back.historyで戻ったときに、再度チェックしてclassが振られるようにload時に全項目チェックさせたいという意図でした。
m.ts10806

2018/12/19 08:01

確かhistory.backだとload動かないはずですね。 ブラウザ的には前のページの最後の状態に戻るのでloadも終わってる状態のはずです。
igaiga

2018/12/19 08:18

動かないのも当たり前ですね。。。 $(this).on('pageshow', '.ui-content', hoge(this)); もだめですかね。。。 やってみたところ動かないですが。
m.ts10806

2018/12/19 08:27

過去質問にもありますが、 https://teratail.com/questions/90103 ブラウザバックでロードイベントは諦めた方が良いかと。 基本的に、ブラウザバックは予期せぬ操作であるということで 動作保障をしないケースが多いです。 あくまでページ内のボタンやリンクで操作をしてくれということですね。
igaiga

2018/12/19 08:30

そうなんですね。お付き合い頂きありがとうございました。
guest

0

js

1$(this).on('keyup', hoge(this)).trigger('keyup');

【jQueryのtrigger()でイベント処理を操作するまとめ! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/40012

投稿2018/12/19 05:39

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問