LoginSignup
0

More than 5 years have passed since last update.

【JavaScript】フォーカスアウト時、指定時間経過時の入力項目チェックで処理の制限をしたい

Last updated at Posted at 2017-10-17

【質問したいこと】

フォーカスが外れた際と指定時間経過した後に入力項目におけるチェック処理を実装しましたが、JavaScriptにexitなる関数、処理がないためどちらも呼ばれてしまいalertで表示しているエラーメッセージが2度表示されてしまう。

【実現したいこと】

alertで出すのは1度にしたい。
フォーカスが外れたときには毎回チェックを実施したい。
指定時間経過時にもチェックを行いたい。

【実装した内容、考えていること】

main.js
function isTimecheck() {
   setTimeout("onAutoSave()", 指定時間);
}

function onAutoSave() {
    var result = true;
    var a = 入力項目.value; //入力項目の入力値を取得する。
    var maxLen = 20; //最大文字数:例で20とする。
    if (a != '') {
        result = WordCountCheck(a, maxlen);
        if (result == false) {
            alert(エラーメッセージ);
            入力項目.focus(); //フォーカスを入力項目に戻す。
            return false;
        }
    }
}
window.onload = function(){
    isTimeCheck();
}
check.js
function WordCountCheck(str, maxLength) {
    var i = 0; 
    var len = 0; //バイト数を格納する。
    str.value = rightTrim(str.value);//不要な右側スペースは削除する。
    var val = str.value;
    if(val !=""){
        for(; i<val.length; i++) {
            半角なら1バイトなので1をlenに加算
            全角なら2バイトなので2をlenに加算
        }
        if(maxLength < len){
            alert(エラーメッセージ);
            str.focus(); //フォーカスを入力項目に戻す。
            return false;
        }
    }
}
Test.html
<TD>
    <textarea cols="" rows="" name="" style="" onBlur="WordCountCheck(this, 20);">入力項目</textarea>
</TD>

このHTML部分を

<TD>
    <textarea cols="" rows="" name="" style="" onChange="WordCountCheck(this, 20);">入力項目</textarea>
</TD>

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

また、チェック処理は別のjsファイルに記載しています。

対応として、以下は実現可能なのかということで今悩んでいます。
①チェックはonBlurのみとし、エラーがあった場合はonAutoSaveの最初で処理を抜けるようにする。
②指定時間経過時には、onBlurの処理が呼ばれないようにする。
③onBlurまたはonAutoSaveで先に呼ばれたほうでチェックエラーとなった場合、その時点で処理を抜ける(exitなる処理が実現できればこれは可能かと思うのですが・・・)

そもそも、この実装の場合onBlurとonAutoSaveは指定時間経過後にはどちらが先に実行されるのでしょうか?

【試してみたこと】

onBlur部分を以下のよう(見やすくするためJSに記載しています。)にしてみたところ、当然ロストフォーカス時にはチェックがかからず、指定時間経過時もチェックはかからない。onAutoSaveが先に呼ばれていたようなので、そこでチェックエラーとなった場合はonBlurの処理を行わないようにグローバル変数のcheckFlgをtrueにするようにしてみました。しかし、alertが2回出てしまいます。

onBlur="isLostFocusCheck(this);"
var checkFlg=false;
function isLostFocusCheck(str) {
    if(checkFlg==false) { //自動保存でチェックエラーとなっていた場合はcheckFlgがtrueとなっているためこのifはスルーされるはず。
        WordCountCheck(str, 20);
    }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0