Я немного застрял в этой проблеме, связанной только с мобильными устройствами, которую я также могу воспроизвести в Google Chrome (даже на настольном компьютере, когда инструменты разработчика настроены на мобильное представление).
Проблема довольно просто. У меня есть форма basi c на сайте, содержащая текстовую область и кнопку отправки под ней. Когда я нажимаю на текстовую область, чтобы она набрала фокус, а затем что-то вводил в нее, мобильный браузер изменяет высоту текстовой области и закрывает мою кнопку отправки, и пользователи больше не могут ее использовать. Проблема здесь в том, что chrome увеличивает высоту текстового поля, чтобы сделать текст больше, но не ретранслирует веб-сайт, поэтому он просто закрывает кнопку. Если я оставлю текст в текстовом поле, он останется увеличенным даже после потери фокуса. Я не уверен, является ли это ошибкой или функцией, но мне она не кажется очень умной.
Кажется, chrome увеличивает шрифт текстовой области, как только он видит какую-либо текст, введенный в него, и поскольку высота вычисляется на основе количества строк, он изменяется и отображается, но по какой-то причине он не влияет на другие части страницы.
Я знаю, что с помощью тег viewport решил бы эту проблему, и я планирую сделать сайт мобильным для мобильных устройств в будущем, но это займет много работы, и поэтому я не могу просто использовать его прямо сейчас.
Настройка Высота (например, высота: 50 пикселей;) также устраняет проблему, но есть некоторые разделы веб-сайта, в которых мне действительно нужно определить его по количеству строк.
Это не такая большая проблема, что текстовая область будет расширен, и все, что сделает сайт полностью функциональным, будет решением на данный момент. Я также был бы заинтересован в root причине этой проблемы, если кто-то знает больше об этой топи c.
Я не мог бы воспроизвести это на codepen.io, так как они используют область просмотра тег, поэтому я подготовил простой пример, подобный этому:
<html>
<head>
<style>
textarea { width: 990px; background: red; }
input { background: blue; }
</style>
</head>
<body>
<textarea name="test" cols="40" rows="5"></textarea><br />
<input type="submit" name="Button" value="Button" />
</body>
</html>
После небольшой попытки мне удалось найти способ обойти его, используя JS, но я уверен, что есть лучшее решение для это:
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
var textarea = $('textarea');
var originalRows = parseInt(textarea.attr('rows'));
textarea.on('input', function() {
textarea.attr('rows', originalRows+1);
textarea.attr('rows', originalRows);
});
});
</script>
Спасибо, ребята, за ваше время, любая помощь будет оценена!