浏览器中的文本区域列大小不一致

Posted 2023-05-07

技术标签:

【中文标题】浏览器中的文本区域列大小不一致【英文标题】：Text area column size inconsistency in browsers 【发布时间】：2020-06-05 15:59:56 【问题描述】：

我有一个定义了 22 列（列/字符）和 16 行的文本区域。但是分配给文本区域的 cols 在桌面和设备上因浏览器而异。

以下是我通过测试示例程序 (https://codesandbox.io/s/condescending-snowflake-3ck5s) 获得的一些测试结果。

平台：Windows

Google chrome、New Edge 浏览器和 Firefox 似乎每行只允许 22 个字符。

平台：Mac

Safari 和 Google chrome 始终允许每行输入 23 个字符。

平台：安卓

三星 J7 上的 Google chrome 允许每行仅输入 22 个字符。但三星 S9 上的谷歌浏览器允许每行输入 21 个字符。

但以下 html 的输出与上面的示例程序不同。 Google chrome 和 New Edge 浏览器始终只允许每行 21 个字符，而 Firefox 支持 22 个字符。

<!DOCTYPE html>
<html>
<head>
	<title>Textarea Tests</title>

	<style>
		textarea 
			resize: none;
			overflow-y: scroll;
			overflow-x: hidden;
		
	</style>
</head>
<body>

	Textarea 1:
	<textarea cols="22" rows="5">
	</textarea>

</body>
</html>

所以我的结论是，不能保证我们得到我们在文本区域中定义的精确列。在不同的浏览器和设备上，它总是像 cols = n - 1 或 n + 1。

是否有基于 javascript 的解决方案来限制一行中的列数？

【问题讨论】：

【参考方案1】：

cols 属性并未声明为确切的字符数限制。但它表示为指定值的平均值。

所以，很明显会导致浏览器之间的差异。

在docs上查看：

cols：文本控件的可见宽度，以平均字符宽度表示。

你可以使用wrap来控制它：

wrap="hard"

了解wrap 的工作原理：

wrap:hard：浏览器自动插入换行符（CR+LF），使每行不超过控件的宽度

如果没有指定这个属性，soft 是它的默认值。

因此，您的 html 将是：

<textarea cols="22" rows="5" wrap="hard">
</textarea>

【讨论】：

【参考方案2】：

为所有设备使用固定的默认高度和宽度

    textarea 
        width:264px;
        height:80px;
        resize: none;
        overflow-y: scroll;
        overflow-x: hidden;

【讨论】：

以上是关于浏览器中的文本区域列大小不一致的主要内容，如果未能解决你的问题，请参考以下文章

input输入框中的光标大小显示不一致的解决方法