对于这个仅限移动设备的问题，我有些困惑，我还可以在Google Chrome浏览器上重现该代码（即使在开发人员工具设置为移动视图的情况下，也可以在台式机上复制）。
问题很简单。我在网站上有一个基本表单，在其中包含一个文本区域和一个提交按钮。当我点击文本区域时，它将获得焦点，然后在其中键入任何内容，移动浏览器将更改文本区域的高度，并覆盖了我的“提交”按钮，用户无法再使用它。这里的问题是，chrome扩大了文本字段的高度以使文本变大，但没有中继整个网站，因此它仅覆盖了按钮。如果我在文本字段中保留任何文本，即使失去焦点，它也会保持放大状态。我不确定这是错误还是功能，但对我来说似乎并不聪明。
似乎chrome在看到任何文本输入后立即放大了textarea的字体，并且由于高度是根据行数计算的，因此会更改并反映出来，但是由于某种原因，它不会影响页面的其他部分。
我知道使用viewport标签将解决此问题，并计划在将来使该网站移动友好，但这将需要大量工作，因此我不能立即使用它。
设置高度（例如height：50px;）也可以解决该问题，但是我确实需要在网站的某些部分中根据行数来定义它。
扩大文本区域并不是一个大问题，任何可以使站点正常运行的方法现在都可以解决。如果有人对此主题有更多了解，我也将对这个问题的根本原因感兴趣。
由于它们使用的是视口标签，因此我无法在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>
谢谢您的宝贵时间，我们将不胜感激！
我没有找到合适的解决方案，因为这似乎是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;
});
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句