移动浏览器文本区域高度变化问题关注焦点答案

【问题标题】：Mobile browser textarea height change issue on focus移动浏览器文本区域高度变化问题关注焦点
【发布时间】：2020-01-24 02:19:49
【问题描述】：

我有点纠结于这个仅限移动设备的问题，我也可以在 Google Chrome 上重现（即使在桌面上，当开发人员工具设置为移动视图时）。

问题很简单。我在网站上有一个基本表单，其中包含一个文本区域和一个提交按钮。当我点击 textarea，使其获得焦点，然后在其中输入任何内容时，移动浏览器会更改 textarea 的高度并覆盖我的提交按钮，用户无法再使用它。这里的问题是，chrome 会放大文本字段的高度以使文本更大，但不会重新布局网站，因此它只会覆盖按钮。如果我在文本字段中留下任何文本，即使它失去焦点，它也会保持放大。我不确定这是错误还是功能，但对我来说似乎不是很聪明。

似乎 chrome 一旦看到输入的任何文本就会放大 textarea 的字体，并且因为高度是根据行数计算的，所以它会改变并被反映，但由于某种原因它不会不会影响页面的其他部分。

我知道使用视口标签可以解决这个问题，并计划将来使网站适合移动设备，但这需要大量工作，所以我不能现在就使用它。

设置高度（例如高度：50px;）也解决了这个问题，但是网站的某些部分我确实需要通过行数来定义它。

textarea 变大并不是什么大问题，任何能让网站完全正常运行的方法都是目前的解决方案。如果有人对此主题了解更多，我也会对此问题的根本原因感兴趣。

我无法在 codepen.io 上重现这一点，因为他们正在使用 viewport 标签，所以我准备了一个像这样的简单示例：

<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>

感谢大家的宝贵时间，我们将不胜感激！

【问题讨论】：

我在 iOS 上遇到过类似的情况。如果您的font-size 小于 15px（或 16px，我不记得），专注于输入将导致浏览器在移动设备上放大。也许这就是你正在经历的同样的事情？您可以尝试增加文本区域的字体大小吗？
感谢您的意见@volt。我也找到了这个信息，并且已经尝试过了，但这肯定最近也被改变了。该数字实际上取决于其他一些因素，例如文本区域的宽度。根据我的观察，我必须将 font-size 设置为 77px 以完全防止这种情况发生。而对于 iOS，是的，Safari 也有帮助用户的作用，但它只是放大整个页面，不会影响页面，因此不会引入功能问题。

标签： html css mobile-website mobile-browser mobile-chrome

【解决方案1】：

我没有找到合适的解决方案，因为它似乎确实是 chrome 本身的一个错误。但我找到了一个非常好的非侵入性解决方法。

$(document).ready(function() {
    $('textarea').each(function() {
        var textarea = $(this);
        var lastHeight = textarea.css('height');

        textarea.on('beforeinput', function() {
            // not yet available in ff and edge where the issue is not reproducible
            lastHeight = textarea.css('height');
        });

        textarea.on('input', function() {
            var height = textarea.css('height');

            if (height !== lastHeight) {
                var inlineHeight = textarea.get(0).style.height;
                textarea.css('height', height);
                $(document).height();  // force reflow
                textarea.css('height', inlineHeight);
            }

            lastHeight = height;
        });
    });
});

【讨论】：