Textarea wrap не работает

В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.

1. Изображение в качестве фона, которое пропадает при вводе текста.

Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.

Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:

2. Placeholder в HTML5

В HTML5 появился новый атрибут, называемый placeholder. Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.

HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.

3. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery

Самый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:

Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder.

4. Удаляем обводку textarea

Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea, когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance, либо можно просто установить элементу бордер или фон.

5. Запрет изменения размера

Webkit-браузеры добавляют к textarea визуальный элемент в правом нижнем углу, который позволяет изменять размер текстовой области. Если вы хотите убрать эту возможность, то вам необходимо использовать следующее css-свойство:

6. Добавление возможности изменения размера

jQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:

7. Изменение размера под содержимое

James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот. Плагин содержит много настроек, но самый простой способ его использовать это:

8. Nowrap

Чтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space, которое не работает с textarea. Для textarea необходимо использовать атрибут wrap.

9. Удаляем скролл-бары в IE

IE показывает вертикальный скролл-бар для всех textarea. Вы можете их спрятать используя overflow: hidden, но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:

В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.

Примеры к статье вы можете посмотреть здесь.

Источник

HTML cвойства тега textarea

Textarea — один из важных элементов полей для ввода, особенно для форм обратной связи при создании сайтов. Поэтому он рождает множество проблем для верстальщиков и программистов. Есть несколько особенных HTML свойств textarea. О них я и хочу поведать.

Размеры textarea

Начнем с первых и важных свойства textarea, а именно как задать размеры (высоту и ширину) текстового поля. Для этого есть два варианта. В первом варианте задаем cols (количество символов в строке) и rows (количество строк).

Или указывать размер в CSS свойствах:

В первом случае мы точно знаем, сколько символов поместится в форме, во втором случае будет проблема, так как иногда буквы будут обрезаны.

Замещающий текст в HTML5

Существует новый атрибут в качестве части формы HTML5, называется placeholder. Это свойство textarea показывает текст приглушенно серым цветом (также работает для полей Input), который исчезает при наведении фокуса на поле или при вводе хотя бы одного символа в поле.

Работает только в современных браузерах. Есть решение для всех браузеров, оно, конечно, не будет таким красивым. Для работы необходим JS.

Обратите внимание, что значение должно быть одинаковым, иначе не будет работать.

Как убрать свечение у textarea?

Все webkit-браузеры, Firefox 3.6, все 10-е оперы навешивают голубую рамку (каемку) вокруг textarea, когда они находятся в фокусе. Вы можете удалить ее из браузера следующим образом:

Помните, что свечение textarea и полей для ввода текста является стандартом и важным элементом юзабилити сайта. Удаляя это оформление, вы создаете сложности для посетителя вашего сайта.

Как удалить маркер изменения размера у textarea?

Webkit-браузеры предлагают маленький элемент пользовательского интерфейса в правом нижнем углу textarea, при помощи которого пользователи могут изменить размеры текстового поля. Если по каким-либо причинам вы хотите удалить, то используем CSS:

Nowrap — убрать переносы

Чтобы текст автоматически не переносился, в CSS можно использовать #whatever . Но это описание не работает с textarea. Если вы хотите иметь возможность не переносить слова на новую строку в textarea, пока вы не нажмете Enter (будет возникать горизонтальная полоса прокрутки, а не срабатывает), вам придется использовать атрибут wrap=»off».

Как убрать полосу прокрутки textarea в Internet Explorer?

IE старых версий ставят вертикальную прокрутку по умолчанию на всех textarea. Вы можете спрятать его через overflow: hidden, но тогда вы не получите никакой прокрутки везде, когда текста станет больше, чем высота поля. Слава богу, overflow:auto удалит прокрутки, но включит прокрутку автоматически в случае необходимости.

Источник

Textarea «wrap = hard» не работает для Firefox

У меня есть следующий код:

где SCRIPT.php выглядит следующим образом:

«; echo «
«; echo nl2br($pastwork); ?>

У меня проблема в том, что в Firefox разрывы строк не передаются должным образом. Когда я набираю следующее в текстовой области (B обозначает символ, который заставляет курсор перейти на следующую строку, N обозначает символ, который заставляет это слово перейти на следующую строку):

ddddddddddBdd fff
GGG GGG GGNGG SSS

то есть текстовое поле выглядит так:

Internet Explorer повторяет это как:

что правильно, с разрывами строк именно там, где они были в текстовой области.

Тем не менее, Firefox повторяет это как:

использую ли я nl2br() или pre теги.

(Я еще не пробовал другие браузеры)

Может кто-нибудь, пожалуйста, скажите мне, почему это так и как убедиться, что переносы строк правильно передаются независимо от браузера.

В Firefox (по крайней мере, от 3,6+), чтобы сохранить автоматические линии, здесь то, что вы должны сделать…

Конечно, установите wrap=hard

Не используйте атрибуты cols и rows

Необходимо указать ширину и высоту CSS

Не указывайте переполнение CSS вообще (пусть Firefox определит его)

Протестировал этот точный сценарий, и он, похоже, разбился на строки в правильных местах.

Похоже, что Mozilla Firefox использует атрибут cols , чтобы разбить текст вместо отображаемой ширины текстового поля. В XHTML требуются атрибуты cols и rows . Вы должны попытаться определить, каково значение атрибута cols , но это довольно сложно сделать, потому что ширина “col” зависит от используемого шрифта. Вы можете использовать JavaScript для определения длины шрифта.

Вы можете получить шрифт элемента (даже если он не определен через CSS!) и рассчитать ширину текста внутри этого элемента. Таким образом, вы можете получить максимальную длину текста, нарисованную на одной строке. Затем вы должны установить атрибут cols вручную, используя JavaScript: textarea.setAttribute(«cols», numberofcols) . Ширина столбца – это средняя ширина символа определенного шрифта.

Почему бы вам не попробовать

? Я знаю это одно и то же, но это может стоить проблемы.

Я обнаружил, что это сработает, если я просто настрою cols на действительно высокое значение.

Как и cols=200 , и поскольку он на самом деле меньше, он будет правильно выполнять разрывы строк.

Я создаю свою текстовую область с jquery, чтобы она выглядела так…

Источник

Проблемы с переносом строки в textarea

Наверняка я буду не первым и не последним из тех, кто сталкивался, по неграмотности, с проблемой переноса строк в textarea при записи содержимого в MySQL-базу — все символы переноса строки остаются незамеченными и в базу попадает, по сути, одна большая строка.

Обратившись к великому Гуглу, наковырял, так сказать, изюма из булок — ну и выкладываю засим…

Способ первый (а вдруг повезет):

Как гласит спецификация HTML (поправьте меня, гуру, при ошибке в терминологии), у поля TEXTAREA имеется замечательный атрибут — WRAP, который определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения:

off — перенос слов не происходит (значение по умолчанию)

virtual — перенос слов только отображается, на сервер же поступает неделимая строка.

physical — перенос слов будет происходить во всех точках переноса.

Вот, кажется, и панацея нашлась:

Применив на практике сие чудо мысли, заметил, что оно НЕ РАБОТАЕТ. Видимо, по незнанию перепутал переносы слов и строк 🙂 Так вот, данная фича относится именно к переносу слов и никак иначе…

Способ второй. Рабочий.

Так как работаем с базой на языке php (ну, там, селекты, апдейты), то неглупым было бы использовать обычную стандартную функцию языка — nl2br, которая вставляет HTML код разрыва строки перед каждым переводом строки. Делается это приблизительно так:

Естественно, безо всяких мудрствований с дизайном, это уже делайте исходя из собственных соображений. А вот фрагмент файла add.php, куда мы отправляем данные из нашей формы методом POST:

Вот так уже работает. Но есть одно но. Не всех устроит обычный перенос строки, так как не каждому понравится отсутствие интервала между абзацами, поэтому применяем

Способ третий. Доработка напильником.

Источник

How to remove word wrap from textarea?

my simple textarea doesn’t show a horizontal bar when text overflows. It wraps text for a new line. So how do I remove wordwrap and display horizontal bar when text overflows?

6 Answers 6

white-space: nowrap also works if you don’t care about whitespace, but of course you don’t want that if you’re working with code (or indented paragraphs or any content where there might deliberately be multiple spaces) . so i prefer pre .

overflow-wrap: normal (was word-wrap in older browsers) is needed in case some parent has changed that setting; it can cause wrapping even if pre is set.

also — contrary to the currently accepted answer — textareas do often wrap by default. pre-wrap seems to be the default on my browser.

Textareas shouldn’t wrap by default, but you can set wrap=»soft» to explicitly disable wrap:

EDIT: The «wrap» attribute is not officially supported. I got it from the german SELFHTML page (an english source is here) that says IE 4.0 and Netscape 2.0 support it. I also tested it in FF 3.0.7 where it works as supposed. Things have changed here, SELFHTML is now a wiki and the english source link is dead.

EDIT2: If you want to be sure every browser supports it, you can use CSS to change wrap behaviour:

Using Cascading Style Sheets (CSS), you can achieve the same effect with white-space: nowrap; overflow: auto; . Thus, the wrap attribute can be regarded as outdated.

From here (seems to be an excellent page with information about textarea).

EDIT3: I’m not sure when it changed (according to the comments, must’ve been around 2014), but wrap is now an official HTML5 attribute, see w3schools. Changed the answer to match this.

The following CSS based solution works for me:

I found a way to make a textarea with all this working at the same time:

With horizontal scrollbar

Supporting multiline text

Text not wrapping

It works well on:

Chrome 15.0.874.120

Firefox 7.0.1

Opera 11.52 (1100)

Safari 5.1 (7534.50)

IE 8.0.6001.18702

Let me explain how i get to that: I was using Chrome inspector integrated tool and I saw values on CSS styles, so I try these values, instead of normal ones. trial & errors till I got it reduced to minimum and here it is for anyone that wants it.

In the CSS section I used just this for Chrome, Firefox, Opera and Safari:

In the CSS section I used just this for IE:

It was a bit tricky, but there is the CSS.

An (x)HTML tag like this:

And at the end of the section a JavaScript like this:

The JavaScript is for making the W3C validator passing XHTML 1.1 Strict, since the wrap attribute is not official and thus cannot be an (x)HTML tag directly, but most browsers handle it, so after loading the page it sets that attribute.

Hope this can be tested on more browsers and versions and help someone to improve it and makes it fully cross-browser for all versions.

Источник