多个用户控件实例的相同 JavaScript 不起作用

Question

我在我的网站中使用了一个用户控件，它执行自动完成文本框的功能。我已将 JavaScript 用于 keydown 和 onfocus 客户端事件。这是代码：

<script language="JavaScript" type="text/javascript">
function TriggeredKey(e) {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    if (keycode == 9) {
        document.getElementById("<%=pnlSearch.ClientID %>").style.visibility = 'hidden';
        document.getElementById("<%=pnlSearch.ClientID %>").style.display = 'none';
    }
    else {
        document.getElementById("<%=hdfkey.ClientID %>").value = keycode;
    }
    _dopostback();
}


function pasteIntoInput(el) {
    var text = document.getElementById("<%=txtSearch.ClientID %>").value;
    if (typeof text != "undefined" && text != "") {
        el.focus();
        el.value = el.value;
        if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
            var val = el.value;
            var selStart = el.selectionStart;
            el.value = val.slice(0, selStart) + val.slice(el.selectionEnd);
            el.selectionEnd = el.selectionStart = selStart + text.length;
        }
        else if (typeof document.selection != "undefined") {
            el.focus();
        }
    }
}

当我在我的 aspx 页面中使用此控件的单个实例时，它可以正常工作，但是当我在我的 aspx 页面中使用多个实例时，所有控件的 JavaScript 都会被我页面中控件的最后一个实例覆盖并且没有其他控件起作用。

Answer 1

这是我过去处理此类问题的方式...

像这样的块放在控件 ascx 中引用的外部 js 文件中。

    function UserControl() {
    }

    UserControl.prototype = {       
        DoStuff : function() {
                var x = this.clientID; 
                window.alert(this.pnlSearchClientID);
            },
        TriggeredKey : function(e) {
                var keycode;
                if (window.event) keycode = window.event.keyCode;
                if (keycode == 9) {
                    document.getElementById(this.pnlSearchClientID).style.visibility = 'hidden';
                    document.getElementById(this.pnlSearchClientID).style.display = 'none';
                }
                _dopostback();
            },
        pasteIntoInput : function() {
            var text = document.getElementById(this.txtSearchClientID).value;
        }
    };

这样的块在 ascx 文件中：

<script type="text/javascript">
    function UserControl<%=this.ClientID%>() {
        this.pnlSearchClientID = <%=pnlSearch.ClientID%>;
        this.txtSearchClientID = <%=txtSearch.ClientID%>;
    }
    UserControl<%=this.ClientID%> = UserControl.prototype;

</script>

然后在包含用户控件的页面中：

<script type="text/javascript">
    var inst1 = new UserControl<%=instance.ClientID %>();  
    inst1.DoStuff();
</script>

这个想法是你有一个具有你需要的功能的基类，在用户控件的所有实例之间共享。然后是用户控件的每个实例的派生类，新的构造函数为所有特定于实例的日期（即组成用户控件的控件的 ID）设置属性。基类引用这些属性。派生类使用用户控件的 ClientID 命名，使其在页面上是唯一的。

我无法访问 asp.net ATM，所以这里可能有错误...

Answer 2

首先我会在一个地方定义你的 javascript 函数，可能是父页面，甚至是全局引用的文件。这样，当您在单个页面上使用用户控件的多个实例时，您就不会一遍又一遍地呈现相同的功能。

然后，我建议不要将 pnlSearch 和 txtSearch 控件的客户端 ID 嵌入到 JavaScript 函数中，而是在调用它们时将它们传递到函数中。

您在呈现的用户控件的最后一个实例上设置 JavaScript 函数的方式将是每次都会调用的函数，这将导致先前呈现的用户控件实例中的函数被忽略.