テキストボックスが2つあり(AとBとします)、
AにはonBlur時に、BにはonFocus時に処理を行うようにしています(実行処理はそれぞれ別物)。

この状態でAからBにカーソルを移すと、
BのonFocus処理を行い、その後AのonBlur処理を行ってしまいます。

AのonBlur→BのonFocusという順番で処理をしたいのですが、これは可能なのでしょうか?
また、イベントハンドラの発生順序(処理順序?)には決まりがあるのでしょうか?

A 回答 (2件)

<input id=a onBlur=alert("aB")>


<input id=b onFocus=alert("bF")>

↑のソースだと、a から b にカーソルを移すと
alert("aB") → alert("bF")
となりました。

puntoabartさんはもっと複雑な処理をさせていて、
その中で逆になってしまっているんだと思います。
たぶん思いどうりにできますよ。

この回答への補足

確かに、onBlur処理はforやifがたくさん入った複雑なものになっています。

ところで、複数のイベントハンドラの処理は並行して行っているのでしょうか?
もし、並行して行っているならonBlur開始→onFocus開始となり、
処理が複雑なonBlurが終わる前にonFocusが終わってしまうのかもしれません。

補足日時:2001/03/08 09:12
    • good
    • 0

処理が並行して行う という部分が分かりませんでした。


onBlurが終わる前にonFocusが終わってしまう という部分も
分かりませんでした。

この回答への補足

変なたとえかもしれませんが、「ご飯を食べる」という行動と「新聞を読む」という行動を考えてみましょう。

処理を並行して行う、というのは
「ご飯を食べながら新聞を読む」イメージです(行儀は悪いですが)。
余談ですが、並行に対する概念として「連続」という処理方法もあります。
これは、「ご飯を食べ終わってから新聞を読む」というイメージです。

『onBlurが終わる前に~』については、
「onBlur処理が完了する前にonFocus処理が完了する」
ときっちりと書けばよかったかもしれません。

ご飯と新聞のたとえで言うと、
「ご飯を食べている途中で新聞を読み始め、先に新聞を読み終えてしまう」といったところです。

補足日時:2001/03/09 09:34
    • good
    • 0

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qイベント発生順序

いつもお世話になっています。

JavaScriptの発生順序を制御する方法はありますでしょうか?
例えば、あるテキストボックスがあって、
A1→B2とフォーカスが移るときのイベントですが、
B2.onFocus→A2.onBlurの順番でイベントが発生していますが、これを
A2.onBlur→B2.onFocusとしたいです。

IE限定でいいので、よろしくお願いします。

Aベストアンサー

#4>text1,text2の両方に値が入ってる場合、text1→text2にフォーカスが移った場合に、カーソルが消えてしまいます。
#4>これは、先の質問のようにtext2のフォーカスイベントが、text1のフォーカスアウトのイベント前に処理されるためだと思います。

カーソルが消える状況というのは、イベントの処理順というより、TAB移動した時の画面の更新タイミングに依るようです。(クリックで移動した場合は、カーソルは消えませんでした、また、setTimeoutによってイベント終了後に変更するようにしてもタブ移動の場合カーソルがでないため)
というわけで、非常にブサイクなやり方ですが、以上の状況をなんとかするためにタブ移動をscript で実行するサンプルを書いてみました。
text1 からフォーカスが無くなったら、text2に(#4で示されたような)値を設定します。
----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>sample</title>
<script type="text/javascript"><!--
var t_id;
function func1(){
clearTimeout(t_id);
form1.text2.focus();
form1.text2.value = form1.text1.value + '0000';
}
function tabEmu(){
if(event.keyCode==9){
form1.text2.focus();
event.returnValue=false;
return false;
}
}
//-->
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1" value="9999" onkeydown="tabEmu()" onblur="t_id=setTimeout('func1()', 250);">
<input type="text" name="text2" value="1000">
</form>
</body>
</html>

#4>text1,text2の両方に値が入ってる場合、text1→text2にフォーカスが移った場合に、カーソルが消えてしまいます。
#4>これは、先の質問のようにtext2のフォーカスイベントが、text1のフォーカスアウトのイベント前に処理されるためだと思います。

カーソルが消える状況というのは、イベントの処理順というより、TAB移動した時の画面の更新タイミングに依るようです。(クリックで移動した場合は、カーソルは消えませんでした、また、setTimeoutによってイベント終了後に変更するようにしてもタブ移動の場...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qtabindex値の設定

tabindexの値を設定する方法を教えてください。

<input name='abc' id='abc' tabindex='xx' />

調べたら下記の方法でできると書いてありましたが、
上手くいきません。

document.getElementById('abc').tabindex='1';


以上、よろしくお願いします。

Aベストアンサー

× .tabindex
○ .tabIndex

<script>
window.onload=function(){
document.getElementById('a').tabIndex='3';
document.getElementById('b').tabIndex='2';
document.getElementById('c').tabIndex='1';
}
</script>

<input name='a' id='a' />
<input name='b' id='b' />
<input name='c' id='c' />

Qonchangeイベントを強制的に発生させる

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchange = change;
}


</script>

<input id="1" type="text" value="1" onchange="change();">

<a href="javascript:update();">update</a>

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchan...続きを読む

Aベストアンサー

回答は出てますが・・・onchangeにこだわるなら、

document.getElementById('***').onchange();

()を付ければ呼び出せます。(Windows FireFox2、Opera8で確認)


var f = document.getElementById('***').onchange;
f();

IE6の場合はいったん変数に代入する必要があるようです。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QJavaScriptで変更した属性の元の値の取得

いつもお世話になっております。

ページの画像をとある条件で変更しようとしております。
HTML5のdata-を利用して変更後の画像のパスをimg要素内に持たせております。
JavaScriptでimg要素を取得し画像の変更は実現できております。
その後もとの画像に戻したいのですが、JavaScriptでimg要素を取得してもsrc属性が変更後の値になっており変更前の値が取得できません。
変更前の値の取得方法を教えてください。

■HTMLソースの一部
<p><img src="img/moto.gif" alt="" data-mimage="img/ato.gif"></p>

■JavaScriptの一部
function wid(){
var image=document.getElementsByTagName('img');
if(window.innerWidth>=320){
for(var i=0;i<image.length;i++){
image.item(i).src=image.item(i).getAttribute("data-mimage");
}
}else{
// ここに元の画像に戻すためのスクリプトを書きたい
}
}
}
wid関数を作ってそのなかでimg要素を取得し、条件を満たしたらすべてのimg要素のdata-mimageの属性値を元のsrc属性に上書きします。
次に条件が満たされていない場合はHTMLにもともと書いてあったsrc属性の属性値をsrc属性値に戻したいのですがこの値が取得できません。

img/moto.gifをimg/ato.gifに変更することは出来ます。
img/ato.gifに変更した後img/moto.gifに戻すことが出来ません。

もちろんdata-mimage2="img/moto.gif"を追加すれば可能なのは分かっていますが、現状のHTMLを変更することなく実現したいです。

よろしくお願いします。

いつもお世話になっております。

ページの画像をとある条件で変更しようとしております。
HTML5のdata-を利用して変更後の画像のパスをimg要素内に持たせております。
JavaScriptでimg要素を取得し画像の変更は実現できております。
その後もとの画像に戻したいのですが、JavaScriptでimg要素を取得してもsrc属性が変更後の値になっており変更前の値が取得できません。
変更前の値の取得方法を教えてください。

■HTMLソースの一部
<p><img src="img/moto.gif" alt="" data-mimage="img/ato.gif"></p>

■JavaScri...続きを読む

Aベストアンサー

回答No.1のt_ohta様のおっしゃるとおり、

>書き換えてしまったものは取得できません。

ので、

>JavaScriptの変数に残しておくか、書き換える前にJavaScriptで別の属性を作って書き残しておきましょう。

の通り、別途属性を作ってパスを保持しておくのが良いかと思います。

_rakuda_ のサンプルを少し修正させてもらいまして、
下記のような形はいかがでしょうか・・・?

function wid(){
var image=document.getElementsByTagName('img');
if( window.innerWidth>=320 ){
for(var i=0;i<image.length;i++){

// data-prev-imgがない場合、srcの値を data-prev-img に挿入する
if (!image.item(i).getAttribute("data-prev-img")) {
image.item(i).setAttribute('data-prev-img', image.item(i).getAttribute("src"));
}

image.item(i).src=image.item(i).getAttribute("data-mimage");

}
} else {
// ここに元の画像に戻すためのスクリプトを書きたい
// data-prev-imgの値をsrcに挿入する
image.item(i).src=image.item(i).getAttribute("data-prev-img");
}
}

上記の形だと、関数実行時にしか data-prev-img が作られませんので、
data-prev-imgが無い状態で else のほうに入ってきてしまうとエラーが出てしまうので、
onload時などページの読み込みが終わったタイミングで、
data-prev-img の設定を先にしてしまうのが処理の流れ的には良いかもしれないですね。

ご参考になれば幸いです。

回答No.1のt_ohta様のおっしゃるとおり、

>書き換えてしまったものは取得できません。

ので、

>JavaScriptの変数に残しておくか、書き換える前にJavaScriptで別の属性を作って書き残しておきましょう。

の通り、別途属性を作ってパスを保持しておくのが良いかと思います。

_rakuda_ のサンプルを少し修正させてもらいまして、
下記のような形はいかがでしょうか・・・?

function wid(){
var image=document.getElementsByTagName('img');
if( window.innerWidth>=320 ){
for(var i=0;i<image.len...続きを読む

Q