テキスト入力「input type="text"」や「textarea」の入力完了は通常「onCheange」イベントなどを利用して検知します。ただ「onChange」イベントは、入力フィールドからフォーカスが離れた場合に発生するため、入力フィールドが1つの場合やajaxを利用している場合などで操作性が低下することがあります。
当ページでは、入力が一定時間行われなかった場合、自動で入力の終了と判定するサンプルを生成しています。
色々試してみて、生成されたCSSをコピーしてご利用ください。
<input type="text" id="inText" oninput="inputText()" style="width:260px" placeholder="入力してください">
<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>
「input type="text"」や「textarea」の他にも、キー入力の「input」で利用可能です。また、「input type="range"」はブラウザによりイベント発生タイミングが違うため、上記タイマーの仕組みを取り入れるとイベント発生を統一することが出来ます。
生成できるホームページ・パーツ一覧 | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
ご利用時の注意事項・制約事項 | |
よくあるご質問 | |
何で無料なの? | |
生成コードに利用制限はある? | |
生成コードに保証はある? | |
jQueryで生成できない? |
スマートフォン・タブレット | 運営:株式会社シーマン |