C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[6]: TextChangedイベントとjavascript

分類:[.NET 全般]　

分類:[ASP.NET (VB)]　
環境:[ASP.NET、VB.NET visual studio2005]

お世話になっています。宜しくお願いします。。。。
現在上記のような環境で開発を行っています。

開発中の画面状況としては、
マスターページ上にアップデートパネルを配置、
アップデートパネル上に各コントロールを配置しています。

行いたい動作としましては、、、、
javascriptでのonKeyDownイベントでカーソルを次コントロールに移動(フォーカス移動用のfunctionを使用)、
それによって起こるTextChangedイベントでサーバにアクセスしデータを取得、
そのデータを違うtextコントール(asp:textbox)に表示。
という動作です。

現在の状況としましては、、、、
aspのtextコントール(asp:textbox)のロードイベントでそのtextコントールにjavascriptでのイベントを追加、
TextChangedイベントでサーバにアクセス。
※コントロールに対しjavascriptが正しく作動しているのは確認済みです。またアップデートパネル上なのでAutoPostBack=trueにもしております。

しかし、javascript、TextChangedそれぞれ単独のイベントならカーソル移動またはデータ取得、データ表示が出来るのですが、複合するとうまく作動しません。
また上下キーでのコントロール移動も考えていますのでvbでのtxtXXXX.Focus()は出来るだけ使用せず作成したいと考えています。

どなたか何かアドバイスがありましたら、宜しくお願いします。

なぜにonkeydownイベントとtextchangedイベントを同じコントロールに置くとうまく動作しないのかも出来たら教えて頂けたら幸いです。。。。

以下が問題部分のソースです。。

宜しくお願いします。。。。長々と失礼しました。

.aspx.vb側
'TextBox1.Load時
Protected Sub TextBox1_load(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox1.Load

sender.Attributes.Add("onKeyDown", "MoveFocus(prev, next);")←コントロールにonKeyDownイベントを追加
End Sub
'TextBox1.TextChanged時
Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox1.TextChanged

sql &= " SELECT XXXX FROM XX"
・
　　・
　　・
Me.TextBox2.text = strXX(サーバから取得した値)

End Sub

外部js
function MoveFocus(prev, next) {

if (window.event.keyCode == 40 || window.event.keyCode == 13) {
next.focus();
} else if (window.event.keyCode == 38) {
prev.focus();
}
}

2008/09/11(Thu) 23:51:14 編集(投稿者)

本当にカーソル移動していますか？
外部js
function MoveFocus(prev, next) {

   if (window.event.keyCode == 40 || window.event.keyCode == 13) {
      next.focus();
   } else if (window.event.keyCode == 38) {
      prev.focus();
   }
}

以下のようにやればカーソル移動しますが・・・・

既存のコントロールに仕掛けを組み込む場合には、後先考えずにいきなり
コード仕込んで動けばいいのですが、動かなくなったり期待する動作を
しなかった場合など何が悪いのか途方に暮れてしまいます。


一度まともに仕様に見合うコードを手書きで作りこんでから本物に実装した
方が良いですね。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<script>
function Move(p, n) {

	var s = null;
	var c = "white";
	if (event.keyCode == 40 || event.keyCode == 13) s = n, c = "orange";
	else if (event.keyCode == 38) s = p, c = "pink";
	else ;
	
	setTimeout(function(S,C,E) {
		return function() {
			if (S) {
				var o = document.getElementById(S);
				o.style.backgroundColor= C;
				o.focus();
			}
			else {
				E.focus();
				E.style.backgroundColor = C;
			}
		}
	}(s, c, event.srcElement), 1);
}
</script>
</script>
</HEAD>
<BODY>

A<input type=text id="T1" onkeydown="Move(null, 'T2')"/>
B<input type=text id="T2" onkeydown="Move('T1', 'T3')"/>
C<input type=text id="T3" onkeydown="Move('T2', null)"/>


</BODY>
</HTML>

>> No24913 まさん
早速の回答有難うございます。。。
外部javascriptは単体でイベントを追加した場合(そのコントロールに対しjavascriptのイベントのみ実装しvbでのイベントが無い状態)は正しくカーソル移動します。また、textコントロールのtextchangedイベントも同様です。
ただ、vbとjavascriptの処理を複合するとjavascriptでのカーソル移動は実行するのですが、サーバーにアクセスしない(textのtextchangedイベントが実行しない)のです。。。

それがなぜなのか分からず・・・・止まっています。。。

>>一度まともに仕様に見合うコードを手書きで作りこんでから本物に実装した方が良いですね。

javascriptではalert、vbではmsgbox等で動作確認、デバッグ等で途中で止めたりしてみてるのですが・・・・そもそもjavascriptしか実行せず、textchangedイベントが動かないので・・・・

回答有難うございました。。。。。またよろしくお願いします。。

すいません、今日一日動かして分かったのですが、、、
エンタキー押下時、javascriptのonKeyDownイベントは実装するのですが、サーバーにアクセスしに行かないらしく(サブミット動作を行わない)、そのためvb側のtextchangedイベントが動かないということです。
AutoPostBack=trueのasp:textboxなのに何故にtextchangedイベントが実装されないのか、
分かる方がいましたら宜しくお願いします。。

なんで躓いているのかわからんのですが・・・

これ理解出来ていますか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
</HEAD>
<BODY>

<form>
<input type=text name="T1">
<input type=text name="T2">
<input type=text name="T3">
<input type=button value="BUTTON" name="OK">
</form>

<form>
<input type=text name="T1">
<input type=button value="BUTTON" name="OK">
</form>

<form>
<input type=text name="T1">
<input type=text name="T2">
<input type=text name="T3">
<input type=submit value="SUBMIT" name="OK">
</form>

<form>
<input type=text name="T1">
<input type=submit value="SUBMIT" name="OK">
</form>


</BODY>
</HTML>

以下のコードで試してみてはいかがでしょうか？

＃　もし外れていたらすみません。m(_ _)m

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>無題のページ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    <br /><br /><br />

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <br />
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <br /><br /><br />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:TextBox ID="TbxResult" runat="server"></asp:TextBox>
    </form>
</body>
</html>


Partial Class _Default
    Inherits System.Web.UI.Page
    Implements IPostBackEventHandler

    Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)

        Dim script1 As String = "<script type='text/javascript'>" _
        + "function MoveFocus(prev, next) {if (window.event.keyCode == 40 || window.event.keyCode == 13)" _
        + " {document.getElementById(next).focus();} else if (window.event.keyCode == 38)" _
        + " {document.getElementById(prev).focus();}}</script>"
        Me.Page.ClientScript.RegisterClientScriptBlock(GetType(String), "script1", script1)

        Me.AppendClientScript(TextBox1, TextBox1, TextBox2)
        Me.AppendClientScript(TextBox2, TextBox1, TextBox3)
        Me.AppendClientScript(TextBox3, TextBox2, TextBox3)

        TextBox1.Attributes.Add("onchange", Me.Page.ClientScript.GetPostBackEventReference(Me, "TextBox1がPostBack!!"))
        TextBox2.Attributes.Add("onchange", Me.Page.ClientScript.GetPostBackEventReference(Me, "TextBox2がPostBack!!"))
        TextBox3.Attributes.Add("onchange", Me.Page.ClientScript.GetPostBackEventReference(Me, "TextBox3がPostBack!!"))

        MyBase.OnLoad(e)
    End Sub

    Private Sub AppendClientScript(ByVal this As TextBox, ByVal prev As TextBox, ByVal _next As TextBox)
        this.Attributes.Add("onkeydown", "MoveFocus('" + prev.ClientID + "','" + _next.ClientID + "')")
    End Sub

    Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles TextBox1.TextChanged, TextBox2.TextChanged, TextBox3.TextChanged
        Dim tbx As TextBox = DirectCast(sender, TextBox)
        TbxResult.Text = tbx.Text + "に変更！！"
    End Sub

    Public Sub RaisePostBackEvent1(ByVal eventArgument As String) Implements System.Web.UI.IPostBackEventHandler.RaisePostBackEvent
        Label1.Text = eventArgument
    End Sub
End Class

>> No24984 まさん
すいません、原因が分かりました。カーソル移動させてるjavascript内で、違うファンクションに飛ばし、値を再表示していたのですが、その過程で不具合が出ていました。
すいませんでした。
おかげで解決しました。長々と有難うございました。

C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[6]: TextChangedイベントとjavascript

過去ログには書き込み不可