焦点上的移动浏览器文本区域高度变化问题

Question

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

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

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

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

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

textarea 变大并不是什么大问题，任何可以使站点功能正常的方法都是目前的解决方案。如果有人对此主题有更多了解，我也会对这个问题的根本原因感兴趣。

我无法在 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>

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

Answer 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;
        });
    });
});

焦点上的移动浏览器文本区域高度变化问题

Mobile browser textarea height change issue on focus

html

css

mobile-website

mobile-browser

mobile-chrome