Question

I am using prettyPhoto to display a form in an inline overlay.

It appears fine, however, I am unable to enter any text into the inputs.

I can focus them with a mouse click but not by tabbing into them.

When focused, I get a blinking cursor but I am unable to type anything. I can paste into them by right click > paste, but not by cmd+v. I can also populate the username field by selecting from the auto fill menu.

It is as if the prettyPhoto overlay is disabling the keyboard.

HTML:

<form id="MemberLoginForm_LoginForm" action="/home/LoginForm" method="post" enctype="application/x-www-form-urlencoded">


    <p id="MemberLoginForm_LoginForm_error" class="message " style="display: none;"></p>


    <fieldset>


            <input class="hidden" id="MemberLoginForm_LoginForm_AuthenticationMethod" name="AuthenticationMethod" value="MemberAuthenticator" type="hidden">

            <div id="Email" class="field text "><label class="left" for="MemberLoginForm_LoginForm_Email">Email</label><div class="middleColumn"><input class="text" id="MemberLoginForm_LoginForm_Email" name="Email" value="" type="text"></div></div>

            <div id="Password" class="field password "><label class="left" for="MemberLoginForm_LoginForm_Password">Password</label><div class="middleColumn"><input class="text" id="MemberLoginForm_LoginForm_Password" name="Password" value="" type="password"></div></div>

            <p id="Remember" class="field checkbox ">
    <input id="MemberLoginForm_LoginForm_Remember" name="Remember" value="1" type="checkbox">
    <label class="right" for="MemberLoginForm_LoginForm_Remember">Remember me next time?</label>

</p>

        <div class="clear"><!-- --></div>
    </fieldset>


    <div class="Actions">

            <input class="action " id="MemberLoginForm_LoginForm_action_dologin" name="action_dologin" value="Log in" title="Log in" type="submit">

            <p id="ForgotPassword"><a href="Security/lostpassword">I've lost my password</a></p>

    </div>


</form>

CSS:

input[type="text"], input[type="password"], textarea, select, .uneditable-input {
    border: 1px solid #E3E4E5;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    display: inline-block;
    font-size: 13px;
    height: 32px;
    line-height: 16px;
    padding: 4px;
    width: 197px;
}

This same form displayed directly in the page elsewhere works perfectly. It is only when in the prettyPhoto pop up.

Answer 1

Solved by turning off keyboard shortcuts:

$("a[rel^='prettyPhoto']").prettyPhoto({
      keyboard_shortcuts: false
});