none
ユーザーコントロールにonblurイベントを追加したい RRS feed

  • 質問

  • こんにちは、ASP.NET3.5をVBで開発しています。

    やりたいことは、金額のカンマ編集を行うユーザーコントロールを配置して、

    Attributes.Add("onblur", "javascript:calc();") で、

    フォーカス移動時にcalc()メソッドで計算を行いたいと思います。

    ただ、このカンマ編集を行うユーザーコントロールですが、

    すでにユーザーコントロール内でAttributes.Add("onblur"・・・で、

    フォーカス遷移時にカンマを付与する、ということをしております。

    そのため、Attributes.Add("onblur", "javascript:calc();") は反映されません。

    onblurを二重にAttributes.Addしているため、片方が上書きされているような

    イメージです。

    何か良い方法がありますでしょうか?

    よろしくお願いします。

     

    2010年7月15日 7:07

回答

すべての返信

  • addEventListener メソッド(IE では、attachEvent)で、 1 つのイベントに
    複数のハンドラを結びつけることが可能になります。

    詳しくは、以下のページを参考にしてください。

    イベントハンドラの追加
    https://developer.mozilla.org/ja/XUL_Tutorial/Adding_Event_Handlers

    element.addEventListener
    https://developer.mozilla.org/ja/DOM/element.addEventListener

    • 回答としてマーク ボビン 2010年7月16日 9:32
    2010年7月15日 12:36

  • ボビンさんに返信

    AttributeCollection.Item プロパティには Set も定義されているので
    サーバー側で行うのであれば、こんなやり方もあります。
    Attributes("onblur") &= "javascript:calc();"
    • 回答としてマーク ボビン 2010年7月16日 9:32
    2010年7月15日 14:02
  • ご回答ありがとうございます。

    おかげで無事解決しました。

    今回は、attachEvent("onblur", keisan);で実装しました。

    メソッド名が「calc」の時はダメでしたが、「keisan」に変更したところ実現できました。

    calcという名前はすでに定義されているのでしょうか?

    SuferOnWwwさん、もりおさん、どうもありがとうございました!

    2010年7月16日 9:32
  • > calcという名前はすでに定義されているのでしょうか?

    そんなことはないはずですけど。以下のコードで IE8, Firefox 3.6.6, Opera 10.60 で
    試して見ましたが、もりおさんが紹介した方法を含めて問題なかったですけど。

    <%@ Page Language="C#" %>

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

    <script runat="server">

        protected void Page_Load(object sender, EventArgs e)
        {
            textbox2.Attributes["onblur"] += "javascript:calc()";
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            //<![CDATA[
            function writeText(id) {
                var tbx = document.getElementById(id);
                tbx.value = "Text written!";
            }
           
            function calc() {
                alert("Focus removed from textbox!");
            }
           
            window.onload = function() {
                var el = document.getElementById("textbox1");
                if (el.addEventListener) {
                    el.addEventListener('blur', calc, false);
                } else if (el.attachEvent) {
                    el.attachEvent('onblur', calc);
                }
            }
            //]]>
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="textbox1" type="text" onblur="javascript:writeText('textbox1');" />
            <br />
            <input id="textbox2" runat="server" type="text" onblur="javascript:writeText('textbox2');" />
        </div>
        </form>
    </body>
    </html>

    2010年7月17日 8:05