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

问题描述 投票：2回答：2

我有一个文本区域，该区域具有22个列（列/字符）和16行。但是分配给文本区域的cols在台式机和设备上的浏览器之间是不同的。

以下是我从测试示例程序（https://codesandbox.io/s/condescending-snowflake-3ck5s）中捕获的一些测试结果。

平台：Windows

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

平台：Mac

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

平台：Android

Samsung J7上的Google chrome每行只能输入22个字符。但是三星S9上的Google Chrome允许每行输入21个字符。

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

<!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的解决方案来限制行中col的数量？

javascript html web cross-browser textarea
2个回答
1
投票

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

因此，很明显导致浏览器之间的差异。

在docs上看到它：

cols：文本控件的可见宽度，以平均字符宽度为单位。

您可以使用wrap对其进行控制：

wrap="hard"

查看wrap的工作方式：

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

如果未指定此属性，则soft为默认值。

因此，您的html将是：

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

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

    textarea {
        width:264px;
        height:80px;
        resize: none;
        overflow-y: scroll;
        overflow-x: hidden;
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.