Запуск клавиатуры iPhone / iPad / iPod вручную из JavaScript

Question

Я занимаюсь разработкой редактора HTML-кода с использованием простых DIV и захвата событий. Когда я использую это на iPad, клавиатура никогда не всплывает, так как технически я не в редактируемой области.

Есть ли способ программно сказать iPad, что мне нужен keybaord?

Answer 1

Если ваш код выполняется с помощью чего-то, что было инициировано с помощью действия пользователя, он будет работать.

Например;

это работает (всплывающая клавиатура):

<input type='text' id='foo'><div onclick='$("#foo").focus();'>click</div>

это не работает (ввод получает границу, но без всплывающей клавиатуры):

<input type='text' id='foo'>
<script>
  window.onload = function() {
    $("#foo").focus();
  }
</script>

Answer 2

Поместите прозрачную текстовую область над содержимым div.Клавиатура откроется, как только пользователь сфокусирует текстовую область.

Зарегистрируйте event listener в текстовой области для события focus и установите для visibility текстовой области значение hidden.Это предотвращает мигание курсора.

Установите visibility текстовой области обратно на visible после того, как произошло событие blur.

Зарегистрируйте дополнительные прослушиватели событий для keydown, keyup, keypress События и обрабатывают эти события так же, как вы обрабатываете их в div contentEditable.

Answer 3

Чтобы клавиатура отображалась на устройствах iOS, вам необходимо сосредоточиться на редактируемом элементе, таком как input или textarea.Кроме того, элемент должен быть видимым , а функция .focus() должна выполняться в ответ на взаимодействие с пользователем, такое как щелчок мыши.

Дело в том, что мы НЕ ХОТИМэлемент ввода должен быть видимым ... Я немного поиграл с этим и в итоге получил искомый результат.

Сначала создайте элемент, который вы хотите использовать для отображения клавиатуры - в данном случаекнопка и скрытый элемент ввода: ( Рабочий jsFiddle или Тест на мобильном устройстве )

<button id="openKeyboard">Open Keyboard</button>
<input id="hiddenInput" style="visibility: hidden;">

Затем используйте следующий код JavaScript:

document.getElementById('openKeyboard').addEventListener('click', function(){
    var inputElement = document.getElementById('hiddenInput');
    inputElement.style.visibility = 'visible'; // unhide the input
    inputElement.focus(); // focus on it so keyboard pops
    inputElement.style.visibility = 'hidden'; // hide it again
});

Примечания:

1. Я заметил, что iOS-сафари автоматически прокручивает и масштабирует область ввода, поэтому убедитесь, что вы используете viewport и расположите свой вводэлемент в соответствующем месте.
2. Вы можете использовать CSS для ввода, например, установить opacity, height и width на 0.Однако, если ваш ввод полностью скрыт, это не сработает снова, поэтому убедитесь, что вы оставили padding или border просто для того, чтобы что-то отображалось (даже если оно не будет отображаться из-за непрозрачности).Это также означает, что вы не должны использовать display:none, чтобы скрыть это, скрытые элементы просто не могут быть сфокусированы.
3. Используйте обычные события клавиатуры (keydown, keypress, keyup) наваш скрытый ввод для доступа к взаимодействию пользователя, как вы это обычно делаете.Здесь ничего особенного.

Answer 4

Я обнаружил, что вызов prompt("Enter some value") вызывает срабатывание клавиатуры на моем iPad 2. Не уверен, полезно ли это в вашей ситуации.

Answer 5

Трюк с прокси-входом

Я нашел другой грязный обходной путь, но он работает хорошо.Хитрость основана на том факте, что если клавиатура уже открыта, изменение фокуса не приведет к закрытию клавиатуры.

1. Добавьте небольшой «прокси-невидимый ввод» в верхнем левом углу страницы с положениемисправлено (фиксированное положение предотвращает мерцание, также убедитесь, что размер шрифта поля превышает 16 пикселей, чтобы предотвратить увеличение масштаба страницы iOS в фокусе)
2. При нажатии кнопки просто .focus() в этом невидимом поле.Клавиатура откроется ...
3. Показать или отобразить другие поля ввода
4. Теперь, когда клавиатура открыта, просто .focus() на нужном входе.Вы можете использовать небольшую задержку setTimeout, например, 500 мс при необходимости

Answer 6

Ответы на эти вопросы показывают, что это невозможно: Почему @contenteditable не работает на iPhone?

Мой коллега, который работал над аналогичным проектом, в конечном итоге использовал текстовую область для версии своего редактора для iPad и contenteditable divs / span для браузеров, которые поддерживают contenteditable. Возможно, что-то подобное подойдет вам.

Answer 7

Вот решение для вас:

<input id="my-input" type="text" />

<script type="text/javascript">
    var textbox = document.getElementById('my-input');
    textbox.select();
</script>