Question

我在ModalPopupExtender中显示一个简单的<input type="text" />，它显示在ColorBox的顶部。它显示正常，但用户无法写入其中。谁能说出什么问题？

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#testbutton').click(function () {
            $.colorbox({ inline: true, width: "50%", open: true, href: "#messageform",
                onClosed: function () {
                    $('#messageform').hide();
                },
                onOpen: function () {
                    $('#messageform').show();
                }
            });
        });
    });
</script>
</asp:Content>


<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <input id="testbutton" type="button" value="click" />

    <div id="messageform" style="display: none;">
        <asp:Button ID="open" runat="server" />
    </div>

    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
        DropShadow="true" PopupControlID="Panel1" TargetControlID="open">
    </ajaxToolkit:ModalPopupExtender>

    <div id="Panel1">
        <input type="text" name="foo" value="" />   <--- **This shows, but can't enter text**
    </div>
</asp:Content>

Answer 1

我写信给Colorbox的作者，他将问题追溯到以下几行：

if (document.addEventListener) {
    document.addEventListener('focus', //trapFocus, true);
                $events.one(event_closed, function (){
                document.removeEventListener('focus', trapFocus, true);
                ;}

我对这些内容进行了评估，现在它似乎有效（不知道旧的IE版本和其他问题）。

Answer 2

name属性正在误导。也许你可以尝试给它一个空值

<input type="text" name="foo" value="" />

onClosed和onOpen有什么作用？你的CSS怎么样？或者是输入上的弹出层（或叠加层）？检查z-index。

Answer 3

尝试分配name和value属性以及

<input type="text" name="myText" value="Enter Your Name">

或者，如果您想指定empty值，请尝试

<input type="text" name=myText value="">

希望它有效。

输入字段不起作用

3 个答案: