<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ボタンなら非表示にしない
なので上記のように書いてみたのですがうまくいきません。
何かいい案がありましたらよろしくお願いします。
No.4ベストアンサー
- 回答日時:
>なので上記のように書いてみたのですがうまくいきません。
ブラウザによって挙動がいろいろなので、どのようにうまくいかないのか(書いてないので)わかりませんが、多分、次のような点でうまくいかないという質問なのでしょうか?
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>
お礼が遅くなってしまい申し訳ありません。
まさしく自分が求めていた動きです。ただ、入力待ちの縦棒(キャレット?でしたっけ)がIEでは表示されないというのが残念です。でも、動きとしては完璧なのでありがとうございました。
No.3
- 回答日時:
'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";
},
このぶぶんを、ごねごねしてたら、できるのではないだろうか?
なげやりで、ごめん。ぺーじがうつったら、けすようにしたけど
たに、へいがいが・・・。
No.2
- 回答日時:
やっぱり、というか、みすをはっけん!
hoge.Detach( window, 'unload', hoge.Handlers, false );
を
hoge.Detach( window, 'unload', hoge.unload, false );
にです。
No.1
- 回答日時:
<!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>
ぜんかくくうはくは、はんかくに。
かいておいてなんなんだけど、これでいいのか
わからなくなってしまいました。
いきおいだけでかいてみましたが・・・。
ちからつきた。
回答ありがとうございます。
コードを理解するのに時間がかかってしまいました。
これはこれで素晴らしいのですが、この書き方はこのページ以外にフォーカスが移った場合はclickボタンは表示されたままではないでしょうか?
なので、テキストエリアのフォーカスロストイベントでdocument.getElementById( 'test2' ).style.visibility = "hidden";
を実行し、その後なんとかしてclickボタンを表示したり非表示にしたりできないかと考えています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jsで質問です。 ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どの 4 2022/11/22 10:30
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
任意の座標をクリックさせるには
-
配列の大括弧と丸括弧はどう違う?
-
HTML:Tableタグに対し、JavaScr...
-
ownerDocumentの使い方を知りた...
-
onclickとonkeypressの重複
-
appendChildがieだとできない??
-
javascriptであるボタンを押す...
-
指定時間でバーを100%にする
-
<a>タグのテキストを取得
-
Click回数を数え、規定された回...
-
モーダルダイアログウィンドウ...
-
Jacascript初心者です。
-
カレンダーを作るには
-
[javascript]DOCTYPE宣言対応に...
-
innerHTML実行後のイベント
-
javascript 作成した要素にCS...
-
javascriptでCSVを呼出しvlookup
-
ActiveXobjectが作成できない
-
【Tabキー】特定の範囲内だけで...
-
javascript初心者です。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
任意の座標をクリックさせるには
-
javascript 特定のタグのidの存...
-
onchangeイベントを使ってspan...
-
HTML:Tableタグに対し、JavaScr...
-
モーダルダイアログウィンドウ...
-
日本語入力の禁止
-
javascriptでCSVを呼出しvlookup
-
Click回数を数え、規定された回...
-
画像上のクリックした場所が分...
-
配列の大括弧と丸括弧はどう違う?
-
【Tabキー】特定の範囲内だけで...
-
重複しないくじの作り方がわか...
-
javascriptで、表示されている...
-
div要素内の全input要素をdisable
-
javascriptであるボタンを押す...
-
javascriptで自動計算フォーム...
-
RadioButtonListの表示制御
おすすめ情報