Клавиатура покрывает ввод текста в webapp (iOS)

Question

Я работаю над webapp с двумя полями ввода в нижней половине экрана. Родительское представление позиционируется абсолютно на экране. Как правило, можно было бы предположить, что при щелчке по полю ввода фокус заставит вход в виде над клавиатурой. Однако клавиатура закрывает поле ввода.

Если я начну печатать, в поле ничего не вводится. Чтобы ввести поле, я должен нажать следующую стрелку, а затем предыдущую стрелку (> перейти в поле №2, затем <, чтобы вернуться в поле 1), чтобы получить вход для просмотра.

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

Answer 1

Вот цитата из ответа на подобный вопрос на Scrolling to selected element while typing on iphone safari virtual keyboard

«Ok , так что это, вероятно, худший взлом, который вы когда-либо увидите, но ничего не бьет.

Что вы можете сделать, это изменить положение текстового поля динамически (с помощью javascript) на фиксированное, фиксированное положение, это изменит положение текстового поля будет относиться к окну браузера, а не к странице. Это должно привести к тому, что прокрутка Iphone не имеет значения, и ваше текстовое поле должно быть в верхней части окна страница ни на что. Затем onBlur позиция css снова устанавливается на относительную (которая должна вернуть ее на место).

Чтобы сделать это красивее, вы можете поместить div за текстовое поле onFocus, чтобы он скрывал фактический контент сайта, и вы могли бы центрировать текстовое поле, используя верхние и левые свойства css (просто убедитесь, что они тоже очищены onBlur). "

Answer 2

Без примера с уменьшенным кодом трудно сказать, но вы можете попробовать зарегистрировать обработчик кликов в первом поле, а затем сфокусировать второе поле в нем, а затем первое поле снова, которое в jQuery будет выглядеть примерно так: это:

$('#first_field').on('click', function(){ 
    $('#second_field').focus(); 
    $('#first_field').focus(); 
}); 

Скорее всего, это не сработает, но стоит попробовать. В противном случае вам нужно будет запустить messin g с вашим CSS и позиционированием. К сожалению, в некоторых случаях WebKit на iOS является ошибкой, когда речь идет о перемещении и масштабировании окна для отображения полей ввода и клавиатуры.

Answer 3

Простое решение для тех, кто заинтересован:

Регистрация onfocus событий на входах, которые вы хотите быть всегда видны, как на примере ниже. Поскольку мы не знаем, когда клавиатура будет полностью отображена, код будет выполняться каждые 300 миллисекунд 5 раз (продолжительность 1,5 секунды). Вы можете настроить его по своему вкусу.

Только одна оговорка к этому решению состоит в том, что он полагается на scollIntoView, который может не работать в некоторых старых браузерах (см. http://caniuse.com/#search=scrollIntoView). Конечно, вы можете заменить его эквивалентным алгоритмом для достижения того же результата. Во всяком случае, это простое решение должно дать вам эту идею.

var scrolling = function(e, c) { 
 
    e.scrollIntoView(); 
 
    if (c < 5) setTimeout(scrolling, 300, e, c + 1); 
 
}; 
 
var ensureVisible = function(e) { 
 
    setTimeout(scrolling, 300, e, 0); 
 
};

<p>Some text here</p> 
 
<input type="text" value="focus me" onfocus="ensureVisible(this)" /> 
 
<p>Some text here</p> 
 
<input type="text" value="select me" onfocus="ensureVisible(this)" />