Html 移动浏览器文本焦点区域高度变化问题_Html_Css_Mobile Website_Mobile Browser_Mobile Chrome

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

html css

Html 移动浏览器文本焦点区域高度变化问题,html,css,mobile-website,mobile-browser,mobile-chrome,Html,Css,Mobile Website,Mobile Browser,Mobile Chrome,我有点被这个只有移动设备的问题困扰了，我也可以在谷歌Chrome上重现（甚至在桌面上，当开发者工具设置为移动视图时）问题很简单。我在网站上有一个基本表单，包含一个文本区和一个下方的提交按钮。当我点击文本区域，使其获得焦点，然后在其中键入任何内容时，移动浏览器会更改文本区域的高度，并覆盖我的提交按钮，用户将无法再使用它。这里的问题是，chrome会放大文本字段的高度，使文本变大，但不会重新显示网站，因此它只覆盖了按钮。如果我在文本字段中留下任何文本，即使它失去焦点，它仍会保持放大状态。我不确定这

我有点被这个只有移动设备的问题困扰了，我也可以在谷歌Chrome上重现（甚至在桌面上，当开发者工具设置为移动视图时）

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

chrome似乎会在看到输入的文本时立即放大文本区域的字体，因为高度是根据行数计算的，所以会发生变化并反映出来，但出于某种原因，它不会影响页面的其他部分

我知道使用viewport标签可以解决这个问题，我正计划在将来使网站对移动设备友好，但这需要很多工作，所以我不能现在就使用它

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

文本区域扩大并不是什么大问题，任何能使网站功能全面的东西都是目前的解决方案。如果有人对这个话题有更多的了解，我也会对这个问题的根本原因感兴趣

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


text区域{宽度：990px；背景：红色；}
输入{背景：蓝色；}

经过一番尝试，我终于找到了一种使用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>


$（文档）.ready（函数（）{
var textarea=$（'textarea'）；
var originalRows=parseInt（textarea.attr（'rows'）；
textarea.on（'input'，function（））{
textarea.attr（'rows'，originalRows+1）；
textarea.attr（'rows'，originalRows）；
});
});

谢谢你们的时间，任何帮助都将不胜感激

我没有找到合适的解决方案，因为这似乎真的是chrome本身的一个bug。但是我发现了一个非常好的非侵入性的解决方法

$(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;
        });
    });
});

我没有找到一个合适的解决方案，因为这似乎真的是chrome本身的一个bug。但是我发现了一个非常好的非侵入性的解决方法

$(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;
        });
    });
});

我在iOS上也遇到过类似的情况。如果您的

font size

小于15px（或16px，我不记得了），专注于输入将导致浏览器放大手机。也许你也经历过同样的事情？你能试着增加文本区域的字体大小吗？谢谢你@volt的输入。我也发现了这个信息，并且已经尝试过了，但是最近这个信息一定也被改变了。这个数字实际上取决于其他一些因素，比如文本区域的宽度。根据我的观察，我必须将字体大小精确设置为77px，以防止这种情况发生。关于iOS，是的，Safari也可以帮助用户，但它只放大整个页面，这不会影响页面，因此这不会带来功能问题。我在iOS上遇到过类似的情况。如果您的

font size