Fix ios не поддерживает фиксированный атрибут

внешний интерфейс JavaScript iOS менеджер по продукту

Описание сценария: Требования к продукту находятся на wap-странице, и вам необходимо исправить область внизу страницы для выполнения операций ввода. В телефонах Android position:fixed отлично поддерживается, и ожидаемый эффект достигается, но курсор поля ввода не центрирован, а нижняя область иногда закрывается всплывающей клавиатурой при тестировании системного телефона ios.

Ду Ньянг узнал план:

  • Имитация с position:absolute;
  • Судя по тому, что текущий сфокусированный элемент является входным, скройте div и измените его на position: absolute;
  • плагин iscroll.js;

Практикуйте план, предложенный Ду Ниангом, три слова ненадежны! !

Наконец, популярная одностраничная идея принимается: когда страница загружается, установите высоту экрана для самого внешнего div страницы, а затем установите атрибуты overflow:scroll и position:relative, то есть страница будет прокручиваться, когда это превышает. Затем установите position: absolute; bottom: 0px; left: 0px; чтобы нижняя область была фиксированной, реализуя таким образом эффект position: fixed атрибута.

<div style="position:relative;" id="pageContal">
    <div style="postion:absolute;bottom:0px;lefe:0px;">
        <input type="text" style="border:1px solid #e6e6e6;border-radius:6px" placeholder="请输入你的手机号码"/>
    </div>
</div>

При выходе на сцену передо мной появился менеджер по продукту с двумя мобильными телефонами разных систем, показал мне эффект и обнаружил, что из-за разных систем, а также метода ввода также есть разные высоты и стили отображения. В системе ios метод ввода, загруженный пользователем, по-прежнему блокирует нижнее поле ввода. В этот момент я потерял дар речи и не мог спорить с менеджером по продукту.

Итак, я наконец написал плагин, имитирующий клавиатуру. . . .

Идея имитации плагина клавиатуры: с помощью макета таблицы высота и ширина являются адаптивными, а мобильный терминал использует единицу rem, чтобы избежать многих проблем. Затем прослушайте событие щелчка каждой цифровой клавиатуры (здесь есть большая дыра, если ios не является тегом, события щелчка нет, щелчок недействителен, другие элементы добавляют событие щелчка, вы должны добавить атрибут: курсор : указатель, щелчок по элементу Только эффективный); определить массив для хранения значения, введенного пользователем, щелкнуть, чтобы добавить элементы в массив, удалить элементы, чтобы удалить элементы из массива, так просто!

<table id="table-keyboard">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td class="bg-ccc"></td>
            <td class="num-td">0</td>
            <td class="delte_but bg-ccc"><img src="img/keyboard-del.png" alt=""/></td>
        </tr>
    </tbody>
</table>
Эффект

Я только что закончил этот проект и воспользовался выходным, чтобы обобщить проблемы, с которыми я столкнулся на этот раз.Я чувствую, что ios - это яма. Друзья фронтенды, берегите и подбадривайте друг друга!

Если код неправильный или возникли проблемы, пожалуйста, сообщите! Учитесь друг у друга!
Категории