Question

我在Django框架中开发。在IOS中，Safari我在标记中有输入光标的错误，就像在这个屏幕截图中一样（当我在控件中输入文本时，光标在输入控件之外）：

。其他浏览器看起来很好 - 没有错误。我的项目中有以下html代码：

<form id="loginForm" name="authorization">
    {% verbatim %}
        <div class="error-message" ng-if="wrongUserPass" id="authErrorPath">{{ loginErrorMess }}</div>
    {% endverbatim %}

    <div class="form-group form-field-group_inline" ng-if="!user_is_authenticated && auth_step1">
        <input class="form-field signinPhone with_ccode" id="id_phone" ng-model="loginForm.loginPhone" bad-gentlemen-mask="+7 (***) ***-**-**" autocomplete="off" name="phone" placeholder="телефон" type="text" my-enter="" value='' {% if mobile == True %} scroll-on-focus {% endif %} />
    </div>
</form>

光标显示为here，但我不知道如何解决此问题。

以下css代码（来自chrome developer tools）对应输入控件id = id_phone：

.form-field:focus, .form-field:hover {
    box-shadow: 0 6px 10px rgba(0,0,0,.1);
}

@media (max-width: 767px) {
    .login__mobile .form-field {
    width: 260px!important;
    margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .login__mobile .form-field {
    padding: 6px 10px!important;
    }

    .login__mobile .form-field {
    padding: 0 12px!important;
    border-radius: 6px;
    }
}

@media (max-width: 767px) {

    .form-field {
    font-size: 1.5rem;
    }

    .form-field {
    border: 3px solid #dfecf5;
    border-radius: 10px;
    font-size: 2.083333333333333rem;
    font-weight: 300;
    padding: 5px 12px;
    width: 100%;
    outline: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    background-color: #fff;
    color: #31323a;
    }

    .form-field, .form-label_block {
    display: block;
    }
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input {
    line-height: normal;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
    padding: 1px 0px;
}

input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}

input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}

input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}

.login__mobile {
    color: #fff;
    display: none;
    padding: 0;
}

.navbar_menu-show .top-menu_mobile {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.top-menu_mobile {
    display: none;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    padding: 5px 15px;
    z-index: 1000;
    background-color: rgba(0,0,0,.9);
    -webkit-transition: all.3s ease;
    -o-transition: all.3s ease;
    transition: all .3s ease;
    text-align: center;
    overflow: scroll;
}

body, html {
    font: 400 12px 'Open Sans',sans-serif;
    line-height: 1.333333333333333;
    color: #1e252b;
    overflow-x: hidden;
}


body, html {
    font: 400 12px 'Open Sans',sans-serif;
    line-height: 1.333333333333333;
    color: #1e252b;
    overflow-x: hidden;
}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

请帮助，谁知道。感谢。

Answer 1

Privet Alexander，我遇到了同样的问题。如果您的ObClTask字段位于具有css属性<input>的容器（div等）中，则会出现iOS错误。我的position: fixed代码标记为<body>，并且必须将其更改为其他内容，即position: fixed。

此处介绍了其他一些解决方法： https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

苹果浏览器。表单输入中的光标靠近输入

1 个答案: