Input fields not working

Question

I am showing a simple <input type="text" /> in a ModalPopupExtender which is shown in top of a ColorBox. It shows fine, but the user can't write in it. Can anyone tell what's wrong?

<%@ 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

I wrote to the author of Colorbox, and he tracked the issue down to the following lines:

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

I outcommented those, and now it seems to work (don't know about older IE versions and other problems though).

Answer 2

the name attribute is misssing. and maybe you could try to give it an empty value

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

what does onClosed and onOpen do? how does your css look like? or is the popup layer (or an overlay) over the input? check z-index.

Answer 3

Try to assign name and value attribute as well Like

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

Or if you want to assign empty value then try

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

Hope it works.