Question

我有一个非常简单的bootstrap模式，用于记录用户。只有两个字段（电子邮件和密码）。问题是，当我触发此模态并单击电子邮件字段时，闪烁的文本输入光标在我键入时显示在错误的位置。它在输入字段之上（参见第一个链接）。但是，如果我点击键盘上的“完成”，然后再次单击文本字段，它似乎没问题（参见第二个链接）。如果我第一次关闭模态并再次打开它，光标就可以了。这只是第一次加载这个模态。

http://i.imgur.com/L12NhYd.png

http://i.imgur.com/u5DSYhL.png

<div class="login-logo sign-in-options">
                        <div class="row">
                            <div class="col-md-12 column sign-in-fields">
                                <button class="close" aria-hidden="true" data-dismiss="modal" type="button">
                                    x
                                </button>
                                <p class="register-page-header">
                                    Please Login.
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 column sign-in-fields">
                                <input type="email" id="user-login-email" class="user-login-field" placeholder="Email" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 column sign-in-fields">
                                <input type="password" id="user-login-password" class="user-login-field" placeholder="Password" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 column sign-in-fields">
                                <a redirect="popup" onclick="displayIndexBAM(this);" class="become-member-link" href="#">Join</a>
                            </div>
                            <div class="col-md-6 column sign-in-fields">
                                <a href="#" redirect="popup" onclick="displayForgotPassword(this);" class="forgot-password">Forgot Password?</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="login-loading"><img src="img/loading_transparent_medium.gif" alt="Loading" class="login-popup-loading">
                            </div>
                        </div>
                        <div class="row">
                            <img alt="Login" class="login-button" redirect="popup" onclick="customerLogin(this);" src="img/login-button.png" />
                        </div>
                        <div class="row">
                            <div class="login-failure-message">An error occurred while trying to process your request. Please try again later.</div>
                        </div>
                        <div class="row">
                            <div class="login-failure-other-messages" style="display:none;"></div>
                        </div>
        </div>

CSS：

#user-login-email, #user-login-password, .user-register-field {
border: 0 none;
border-radius: 5px;
padding: 10px;
width: 100%;

}

.notify-me input, #user-login-email, #user-login-password, .user-register-field, .user-forgot-field, .user-register-zipcode {
background-color: #E5E5E5;
box-shadow: none;
color: #000000;
display: block;
float: left;
margin-top: 5px;

}

行高设置为由BootStrap 3继承

Mobile Safari bootstrap modal：输入字段中的光标显示在错误的位置

0 个答案: