我正在使用prettyPhoto在内嵌叠加层中显示表单。
看起来很好,但是,我无法在输入中输入任何文字。
我可以通过鼠标点击来聚焦它们,但不能通过选项卡进行聚焦。
聚焦时,我得到一个闪烁的光标,但我无法输入任何内容。我可以通过右键单击>粘贴到它们中粘贴,但不是cmd + v。我也可以通过从自动填充菜单中选择来填充用户名字段。
好像PrettyPhoto叠加层正在禁用键盘。
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;
}
在其他地方直接显示的同一表格完美无缺。只有在prettyPhoto弹出时才会出现。
答案 0 :(得分:0)
通过关闭键盘快捷键解决:
$("a[rel^='prettyPhoto']").prettyPhoto({
keyboard_shortcuts: false
});