【JavaScript】フォーカスが外れた時と所定時間経過時に入力項目の値をチェックしたい

JavaScriptで、所定時間が経過した時に自動的に値を保存するためそのタイミングで入力チェックを。また、項目からフォーカスが外れた時にもチェックが行われるようにしたいです。

フォーカスが外れたタイミングはonBlur属性を使えば良いと思うので、onBlurにチェック処理の関数を呼ぶように
また、所定時間経過時の自動保存ではsetTimeoutで一定時間後に同じくチェック処理を呼び出すようにしています。

しかし、エラー時に
ただ入力してフォーカスを外すだけなら当然所定時間前であればonBlurから呼ばれて1回しかエラーが出ないのですが
フォーカスを外さずに所定時間待った場合にonBlurと自動保存で2度呼ばれてしまっている？ため2回同じエラーメッセージが表示されてしまいます。(保存処理行くタイミングで呼び出した時にフォーカスが外れる？ためonBlurが呼ばれてしまっているのかなと思うのですが…onChange(値が変わった時だけ)に変えたら所定時間待っても1回しか呼ばれなかったので何か差があるのかな…という部分も悩んでおります。
onBlurと別で記載してる自動保存処理の関数はどちらが先に呼ばれるものなのでしょうか？

これを、1回しか呼ばれないようにしたいのですがどのようにすればよいか悩んでいるところなので
知恵をお持ちの方がいらっしゃいましたら、ご教示いただければと思います。

参考になるサイトなどあればそのようなものでも構いません。

サーバーサイドの言語はJavaを使用しています。

よろしくお願いいたします。

JavaScript
1function isTimecheck() {
2   setTimeout("onAutoSave()", 指定時間);
3}
4
5function onAutoSave() {
6    var result = true;
7    var a = 入力項目.value; //入力項目の入力値を取得する。
8    if (a != '') {
9        result = チェック処理(a);
10        if (result == false) {
11            alert(エラーメッセージ);
12            入力項目.focus(); //フォーカスを入力項目に戻す。
13            return false;
14        }
15    }
16}

html
1<TD>
2    <textarea cols="" rows="" name="" style="" onBlur="チェック処理">入力項目</textarea>
3</TD>

このHTML部分を

html
1<TD>
2    <textarea cols="" rows="" name="" style="" onChange="チェック処理">入力項目</textarea>
3</TD>

このようにした場合、onBlurのときと同じデータで試した際に1度のみポップアップが出ていたのですがこれだと値が変わってエラーメッセージが出た後に変更しないでフォーカスアウトした場合などにチェックできないので不満足になってしまいます。
この処理の差って何があるかわかるかたいますでしょうか？

このように組んでいるのですが、自動的に保存しに行く際に、フォーカスアウト時の処理も動作し？エラーメッセージのポップアップ(同じ項目の)が2度表示されてしまっています。これを1度しか表示されないようにしたいです。

kei344

2017/10/15 13:04

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

行動規範の内容に同意します

回答3件

たとえばdata-changed的なパラメータを用意して、変更時にフラグとして利用するなどが
スマートで現実的では？

投稿2017/10/16 01:36

yambejp

総合スコア114833

退会済みユーザー

2017/10/16 04:46

現状としてjsはexitがないからreturn falseしても結局全部呼ばれてしまっている感じで考えればよいのですかね？ onBlurかonAutoSaveか先に呼ばれたほうでチェックを行いエラーになったらexitするような処理にできればいいのかなと思うのですが、そんな都合のいい方法ありますかね？チェック自体は、onBlurにて実施しonAutoSaveではチェックエラーかどうかを判別しエラーの場合に処理を中断したいと考えていますがこちらは、onBlurのチェック処理時にフラグを用意し、onAutoSaveにそのフラグで処理を行うかどうか判別させればよいのでしょうか？

行動規範の内容に同意します

onChangeイベントを使い、チェック処理時に変更有無を判定されてはどうでしょうか。

html
1<textarea cols="" rows="" name="" style="" onBlur="チェック処理" onChange="change">入力項目</textarea>

javascript
1var changed = false
2function change() {
3  changed = true; // フラグON
4}
5function チェック処理() {
6  if (!changed) {
7    return; // 値変更していないので処理を抜ける
8  }
9  changed = false; // フラグOFF
10  // 値チェック...
11}