プロが教えるわが家の防犯対策術!

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

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

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

A 回答 (5件)

#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>
    • good
    • 0
この回答へのお礼

ありがとうございます。
これでこの問題自体は解決できそうですが、textboxが増えた場合の制御とかが難しそうですね。
議題が変わってきましたので、一旦クローズさせて頂きます。
長い間お付き合いして頂き、ありがとうございました。

お礼日時:2006/08/14 13:39

#3補足>検証は、あくまでもイベントの確認をするためのものです。


間違っていたらご指摘下さい。
私の答え、
onFocusin を使用することで、イベントの発生順を
A1.onBlur→B2.onFocus
にできる。
・#1onFocusin に変更してみたが「テキストボックスに値が入ってる場合はB2.onFocus→A2.onBlur」のようにイベントが起こるのでonFocusinは使えない。
それに対する私の答え、値が入っていても、(onFocusinで)大丈夫。
・質問者が検証されているHTML
私の答え、onFocusin が使われていない。
#3>フォーカスを受けるイベントを取りたいのではなく、次のフォーカスに移る前の処理をしたいのです。
focus 側で処理をするなんて初めから言っておりません。
つまり、「A2.onBlur→B2.onFocus」の順番でイベントが起こってA2.onBlur で処理をすればいいのですよね?
騙されたと思って、
#2の検証HTMLでonFocus を onFocusin に(両方((B2ですけど)多分ソコを勘違いされているのだと思うのですが))変更して検証してみていただけませんか?

この回答への補足

いつも回答ありがとうございます。
根本的なことを端折ってしまって、本来の問題から外れてきました。

何が問題なのか具体的にあげますと、
以下のJavaScriptで問題になってます。
<input type="text" name="text1" onBlur="text2.value = this.value + '0000';" />
<input type="text" name="text2" />

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

text2に、onFocusinイベントを挿入してもダメでした。
よろしくお願い致します。

補足日時:2006/08/12 17:14
    • good
    • 1

#2補足>


onFocusin になってないみたいだけど・

この回答への補足

#1の補足でも申しましたが、
フォーカスを受けるイベントを取りたいのではなく、次のフォーカスに移る前の処理をしたいのです。
検証は、あくまでもイベントの確認をするためのものです。
説明が足らず申し訳ありません。

補足日時:2006/08/11 14:50
    • good
    • 0

#1>テキストボックスに値が入ってる場合はB2.onFocus→A2.onBlur


となるみたいです。
ウチで試してみたところでは、値が入っていても
A1.onBlur→B2.onFocus
になりますが・・

この回答への補足

ありがとうございます。

検証したHTMLです。
<HTML><HEAD></HEAD><BODY>
<input type="text" name="text1" onFocus="alert('text1.onFocus');" onBlur="alert('text1.onBlur');" />
<input type="text" name="text2" onFocus="alert('text2.onFocus');" onBlur="alert('text2.onBlur');" />
</BODY>
</HTML>

text1、text2の両方に値が入っている場合に
text2.onFucus→text1.onBlurとなります。

環境は、WinXP SP2 IE6.0です

補足日時:2006/08/10 18:20
    • good
    • 0

タブでフォーカス移動した時は


A1.onBlur→B2.onFocus
になって
B2クリックで移動した時は
B2.onFocus→A2.onBlur
になるようです。
B2.onFocus の代わりに
onFocusin を使ってみてください。

この回答への補足

今、色々調査している途中なんですが単純にそういうわけではないみたいです。

テキストボックスに値が入ってない場合は
A1.onBlur→B2.onFocus となりますが、

テキストボックスに値が入ってる場合は
B2.onFocus→A2.onBlur
となるみたいです。

やりたいことは、フォーカスが移る前にonBlurの処理をしたいので、onFocusinは使えません。

補足日時:2006/08/10 15:32
    • good
    • 0

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

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

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

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

QonBlurとonFocusの処理順序について

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

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

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

Aベストアンサー

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

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

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

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化したほうが、可読性が高くなると
思います。

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の場合はいったん変数に代入する必要があるようです。

QonClickとsubmitの処理順序

#過去ログをあたりましたが、自分で納得いく解答がなかったので質問します。

フォームのsubmitボタンにonClickでチェッカーなどの関数を与えた場合、
submitでフォーム内容を送信するのと、onClickで指定されている関数の
どちらが先に処理されるのでしょうか。
(一応、WindowsのIE、ネスケ共々、onClickの処理の後、submitされるようではあります)

function tasikame {
(フォームの内容チェック/中略)
alert("入力されていない項目があります")
}

例えば、このような関数をonClickで起動する場合、フォームに入力されていない
項目があると、警告されます。
この時、submitはどの環境でも起動しないで終わるのでしょうか。
それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。

#分かりづらければ、補足しますのでどうぞよろしく。

Aベストアンサー

> 例えば、このような関数をonClickで起動する場合、フォームに入力されていない
> 項目があると、警告されます。
> この時、submitはどの環境でも起動しないで終わるのでしょうか。
> それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。

この関数の書き方だと、警告のメッセージボックスが表示され、OK を押すと、フォームの
内容は submit されます。

イベントハンドラでは、false を返すことで、本来の動作をキャンセルすることができます。
ですから、期待する(であろう)動作をするためには、

function tasikame {
 //フォームの内容チェック
  ...

 if ( フォームの内容が正しくなければ ) {
  alert("入力されていない項目があります");
  return false;
 } else {
  return true;
 }
}

というような書き方になります。

Qテキストボックスに数字しか入力できないようにするには?

タイトルの通りなのですが、あるテキストボックスに数字しか入力できないようにしたいのですが可能でしょうか?また、

「あいうえお 12345 「」:・、¥・」

というような文字列をコピーし、そのテキストボックスにペーストした際にも数字の12345だけが残るといった事も実現したいのですが…

どなたかご存知の方いらっしゃいましたら教えて頂けると幸いです。

Aベストアンサー

>英数字

では、こんな感じで

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9a-z]+/i,'')">

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

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...続きを読む

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む

QOracle(オラクル)で、日付時刻型の検索方法について

質問させていただきます。
データベースはオラクルを使っていて、
SQL文で、抽出するときにエラーが出て困っています。

日付時刻型が「2005/05/26 19:13:00」という感じで入ってます。
2005/05/26 を抽出したいのですが、
BETWEEN '2005/05/26 00:00:00' AND '2005/05/26 23:59:59'

だと、エラーでできません。
どなた様か、ご教授よろしくお願いしますm(_ _)m

Aベストアンサー

日付検索を行う場合は、以下のように書式を含める必要があります。

col BETWEEN TO_DATE('2005/05/26 00:00:00','YYYY/MM/DD HH24:MI:SS') AND TO_DATE('2005/05/26 23:59:59','YYYY/MM/DD HH24:MI:SS')

ただ、厳密には

col >= TO_DATE('2005/05/26', 'YYYY/MM/DD')
AND
col < TO_DATE('2005/05/27', 'YYYY/MM/DD')

と書くべきでしょうね。

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。


人気Q&Aランキング