文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 入力部品のデザイン > 入力完了を判断する

入力完了を判断するJavaScript

テキスト入力「input type="text"」や「textarea」の入力完了は通常「onCheange」イベントなどを利用して検知します。ただ「onChange」イベントは、入力フィールドからフォーカスが離れた場合に発生するため、入力フィールドが1つの場合やajaxを利用している場合などで操作性が低下することがあります。

当ページでは、入力が一定時間行われなかった場合、自動で入力の終了と判定するサンプルを生成しています。

入力完了を判断するまでの時間を変更して見よう!

色々試してみて、生成されたCSSをコピーしてご利用ください。

入力完了までの判定時間
上記の入力状態が表示されます
使用したhtml
<input type="text" id="inText" oninput="inputText()" style="width:260px" placeholder="入力してください">
使用したJavaScript
<style type="text/css">
var gTimer;
function inputText(){
        // --- サンプル用 メッセージ出力 -------------------
        var wObj        = document.getElementById("endMsg");
        wObj.innerHTML = '入力中です';
        wObj.className = 'defStyle runStyle';
        // =============================================
        //   一定時間を待って入力完了と判断 
        // =============================================
        if(gTimer){clearTimeout(gTimer);}
        gTimer = setTimeout(inputEnd, 700);
}
function inputEnd(){
        // サンプル用の処理です。入れ替えて利用ください
        // 入力完了後のメッセージ入れ替え
        var wObj        = document.getElementById("endMsg");
        wObj.innerHTML = '入力完了と判定しました<br>入力:'+document.getElementById("inText").value;
        wObj.className = 'defStyle endStyle';
}
</style>
ページTOP
広告
広告

注意事項

「input type="text"」や「textarea」の他にも、キー入力の「input」で利用可能です。また、「input type="range"」はブラウザによりイベント発生タイミングが違うため、上記タイマーの仕組みを取り入れるとイベント発生を統一することが出来ます。

ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン