Несоответствие размера столбца текстовой области в браузерах - PullRequest
Новая
       18

Несоответствие размера столбца текстовой области в браузерах

2 голосов
/ 21 февраля 2020

У меня есть текстовая область, в которой определены 22 столбца (столбцы / символы) и 16 строк. Но cols , выделенные для текстовой области, отличаются от браузера к браузеру как на рабочем столе, так и на устройствах.

Ниже приведены некоторые результаты теста, которые я получил при тестировании примера программы (https://codesandbox.io/s/condescending-snowflake-3ck5s).

Платформа: Windows

Google chrome, браузер New Edge и Firefox, кажется, допускают только 22 символа в строке.

Платформа: Ma c

Safari и Google chrome всегда позволяют вводить 23 символа в строке.

Платформа: Android

Google chrome на Samsung J7 позволял вводить только 22 символа на строку. Но Google chrome на Samsung 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 для ограничения количества столбцов в строке?

Ответы [ 2 ]

1 голос
/ 21 февраля 2020

Атрибут cols не устанавливает точного ограничения символов. Но оно соответствует среднему значению указанного значения.

Таким образом, очевидно, что это приведет к разнице между браузерами.

См. Это в документах :

столбцы: видимая ширина текстового элемента управления, в среднем ширина символов.

Вы можете использовать wrap для управления им: 

wrap="hard"

См. как работает wrap :

wrap: hard: Браузер автоматически вставляет разрывы строк (CR + LF), чтобы каждая строка имела ширину элемента управления не более

Если этот атрибут не указан, по умолчанию используется значение soft.

Итак, html будет: 

<textarea cols="22" rows="5" wrap="hard">
</textarea>
0 голосов
/ 21 февраля 2020

Использовать фиксированную высоту и ширину по умолчанию для всех устройств 

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