スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

onblur の発生タイミングと処理方法

例えばこんな場合。

1. テキストボックスにフォーカスがついたら予測検索を表示する
2. 予測検索の単語がクリックされたら単語をテキストボックスに入れる
3. フォーカスがテキストボックスから外れたら予測検索を非表示にする

とてもシンプルな処理だと思います。
この時、例えばこんな方法で実装する。

<script>
function show_words(){
 //予測検索を表示する
}

function hide_words(){
 //予測検索を削除する
}

function insert_word(){
 //単語の一つをクリックしたらテキストボックスに入れる
}
</script>



<html>


<input type="text" onfocus="show_words()" onblur="hide_words()">
<div class="yosoku_word" onclick="insert_word">xxxxx</div>
</html>


一見うまくいくようにみえますが、onblurはフォーカスがはずれた瞬間のイベントなので単語がクリックされる直前(onclickイベント発生前)に単語自体が消え(onblurベントが発生)てしまいます。
こういう場合はtimeoutを使うといいかも。
例えばこう。


<script>
function hide_words_timer(){
setTimeout('hide_words()', 100);
}

function show_words(){
 //予測検索を表示する
}

function hide_words(){
 //予測検索を削除する
}

function insert_word(){
 //単語の一つをクリックしたらテキストボックスに入れる
}

</script>


<html>

<input type="text" onfocus="show_words()" onblur="hide_words_timer()">
<div class="yosoku_word" onclick="insert_word">xxxxx</div>
</html>




これで100msの間にonclickイベントが発生して先にそちらが評価されます。

コメント

コメントの投稿

非公開コメント

PR

PR

プロフィール

何でも書くman

Author:何でも書くman
思ったことや備忘録など、とりあえずなんでも書きます。IT系のことや趣味、生活に関わることなども。

ページの先頭へ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。