dポイントプレゼントキャンペーン実施中！

フォーカス移動のタイミング

解決済

  • 質問者：shaka001
  • 質問日時：
  • 回答数：4件

<html>
<head>
<script type="text/javascript">
<!--
function getelementid(event){
try {
return event.srcElement.id;
} catch ( e ) {
return event.target.id;
}
}

function lostfocus(event){
elem_id = getelementid(event);
elemid = elem_id.replace("1","2");
document.getElementById(elemid).style.visibility = "hidden";
}

function tuikabuttonhyouji(event){
elem_id = getelementid(event);
document.getElementById(elem_id).style.visibility = "visible";
}

function tuikabutton(event){
elem_id = getelementid(event);
elemid = elem_id.replace("1","2");
document.getElementById(elemid).style.visibility = "visible";
}
-->
</script>
</head>
<body>
<textarea rows="1" id="test1" onblur="lostfocus(event);" onDblClick="tuikabutton(event);"></textarea>
<input id="test2" style="visibility: hidden;" type="button" value="click" onFocus="tuikabuttonhyouji(event);">
</body>
</html>

実装したい機能を部分的に抜き出した部分のソースが上の部分です。
実装したい機能しては、
・テキストエリアをダブルクリックしたらclickボタンを表示
・テキストリアからフォーカスが外れたらclickボタンを非表示にする
・ただし、フォーカスの移動先がclickボタンなら非表示にしない
なので上記のように書いてみたのですがうまくいきません。

何かいい案がありましたらよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

＞なので上記のように書いてみたのですがうまくいきません。


ブラウザによって挙動がいろいろなので、どのようにうまくいかないのか（書いてないので）わかりませんが、多分、次のような点でうまくいかないという質問なのでしょうか？

test2のfocus時にtest1のblurが発生しているので、（test1のblurの方が先に処理される）そこで一度非表示にするとtest2のfocusが失われるので、test2が表示されなかったりする。または、表示されても、フォーカスが無い状態で表示される。（ブラウザにより異なる）
あるいは、tesu2がfocusを失ったときの処理がコーディングされていないので、違うところにフォーカスがいってもtest2が表示されたままとなる。

focusイベントはバブリングしないので、それぞれに設定しないとならないみたいですが、フォーム外へフォーカスが移った時も拾わねばならないので、結局blurも全部設定しないとならないみたいですね。

あと、idのtest1→test2の対応を1→2に変換することでとっているのは、このようなテキストエリアとボタンの組み合わせが複数あるという意味でしょうか？（勝手にそう想定して、idは「set○○○#」(○○○は任意の文字列、#は1又は2）で対応するものと仮定しました）


んで、とりあえずこんな感じ？
*ブラウザ外をクリックしたときなどの挙動はブラウザによって異なるようです。（blurが発生するものとしないものがある。IE、FFは発生するがOperaはダメみたい）
*いっぱいイベントをつけるのが面倒なので、ボタン表示はダブルクリックではなく、テキストエリアにフォーカスが移れば表示するようにしてあります。
*ついでに、処理は全部同じfunctionでやるようにしています。

<html>
<head>
<script type="text/javascript">
<!--
function focuscheck(evt) {
var t = evt.target || evt.srcElement;
var s = evt.type, id = t?t.id:null, f;
if (id.match(/^set.+?([12])$/)) {
f = RegExp.$1, id = id.replace(/.$/,'2');
if (this.timer && this.id==id) {
clearTimeout(this.timer);
this.timer = null;
}
if (document.getElementById(id)) {
if (s=='focus') { set(id, 'visible'); } else {
this.id = id;
this.timer = setTimeout(function(){set(id,'hidden')},50);
}
}
}
function set(id, attr) {
document.getElementById(id).style.visibility = attr;
}
}
-->
</script>
</head>
<body>
<textarea rows="1" id="set_a1"
onfocus="focuscheck(event)" onblur="focuscheck(event)">
</textarea>
<input id="set_a2" type="button" value="click"
onfocus="focuscheck(event)" onblur="focuscheck(event)"
style="visibility:hidden;">
<p>
<textarea rows="5" id="set_b1"
onfocus="focuscheck(event)" onblur="focuscheck(event)">
</textarea>
<input id="set_b2" type="button" value="click"
onfocus="focuscheck(event)" onblur="focuscheck(event)"
style="visibility:hidden;">
<p>
<textarea rows="3" id="set_c1"
onfocus="focuscheck(event)" onblur="focuscheck(event)">
</textarea>
<input id="set_c2" type="button" value="click"
onfocus="focuscheck(event)" onblur="focuscheck(event)"
style="visibility:hidden;">
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなってしまい申し訳ありません。

まさしく自分が求めていた動きです。ただ、入力待ちの縦棒（キャレット？でしたっけ）がＩＥでは表示されないというのが残念です。でも、動きとしては完璧なのでありがとうございました。

通報する
お礼日時：2009/11/24 12:27

No.3

  • 回答者： babu_baboo
  • 回答日時：

'Handlers': function ( evt ) {


var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;

if( 'dblclick' == evt.type ) {
if( e.id == 'test1' )
this.buf = e;
document.getElementById( 'test2' ).style.visibility = "visible";
document.getElementById( 'test2' ).focus();
return;
}

if( /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/ == evt.type ) {
if( this.buf ) {
return;
}
}

if( /*@if (@_jscript) 'focusin' @else@*/ 'focus' /*@end@*/ == evt.type ) {
if( this.buf && e.id == 'test2' ) {
this.buf = null;
return;
}
}

if( 'click' == evt.type ) {
if( e.id == 'test1' ) return;
if( e.id == 'test2' ) {
alert("押したわね");
return;
}
}
document.getElementById( 'test2' ).style.visibility = "hidden";

},
このぶぶんを、ごねごねしてたら、できるのではないだろうか？
なげやりで、ごめん。ぺーじがうつったら、けすようにしたけど
たに、へいがいが・・・。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： babu_baboo
  • 回答日時：

やっぱり、というか、みすをはっけん！


　　hoge.Detach( window, 'unload', hoge.Handlers, false );
を
　　hoge.Detach( window, 'unload', hoge.unload, false );
にです。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： babu_baboo
  • 回答日時：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<title>test</title>

<body>
<form action="#" name="a">
<p>
<textarea rows="1" id="test1"></textarea>
<input id="test2" style="visibility: hidden;" type="button" value="click">
</p>
</form>
<script type="text/javascript"><!--

//@cc_on
var hoge = {

　'Handlers': function ( evt ) {
　　var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;

　　if( /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/ == evt.type ) {
　　　this.buf = ( 'test1' === e.id ) ? e: null;
　　　return;
　　}

　　if( /*@if (@_jscript) 'focusin' @else@*/ 'focus' /*@end@*/ == evt.type ) {
　　　if( this.buf && e.id != 'test2')
　　　　document.getElementById( 'test2' ).style.visibility = "hidden";
　　　return;
　　}

　　if( 'dblclick' == evt.type ) {
　　　if( e.id == 'test1' )
　　　　document.getElementById( 'test2' ).style.visibility = "visible";
　　　return;
　　}
　　
　　if( 'click' == evt.type ) {
　　　if( e.id == 'test2' )
　　　　alert("押したわね");
　　　return;
　　}
　　
　},
　　　
　'unload': function (evt) {
　　hoge.Detach( document, /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/, hoge.Handlers, true );
　　hoge.Detach( document, /*@if (@_jscript) 'focusin' @else@*/ 'focus' /*@end@*/, hoge.Handlers, true );
　　hoge.Detach( document, 'dblclick', hoge.Handlers, false );
　　hoge.Detach( document, 'click', hoge.Handlers, false );
　　hoge.Detach( window, 'unload', hoge.Handlers, false );
　},
　
　'Attach': function ( target, type, listener, useCapture ) {
　　　return target./*@if (@_jscript) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ type, listener, useCapture);
　},

　'Detach': function (target, type, listener, useCapture) {
　　　return target./*@if (@_jscript) detachEvent('on' + @else@*/ removeEventListener(/*@end@*/ type, listener, useCapture);
　},

　'Initialize': function () {
　　　this.Attach( document, /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/, this.Handlers, true );
　　　this.Attach( document, /*@if (@_jscript) 'focusin' @else@*/ 'focus' /*@end@*/, this.Handlers, true );
　　　this.Attach( document, 'dblclick', this.Handlers, false );
　　　this.Attach( document, 'click', this.Handlers, false );
　　　this.Attach( window, 'unload', this.unload, false );
　　}
};

hoge.Initialize( );

//-->
</script>
ぜんかくくうはくは、はんかくに。
かいておいてなんなんだけど、これでいいのか
わからなくなってしまいました。　
いきおいだけでかいてみましたが・・・。
ちからつきた。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

コードを理解するのに時間がかかってしまいました。
これはこれで素晴らしいのですが、この書き方はこのページ以外にフォーカスが移った場合はclickボタンは表示されたままではないでしょうか？

なので、テキストエリアのフォーカスロストイベントでdocument.getElementById( 'test2' ).style.visibility = "hidden";
を実行し、その後なんとかしてclickボタンを表示したり非表示にしたりできないかと考えています。

通報する
お礼日時：2009/11/20 13:12

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報