Как получить многострочный ввод или текстовую область, которая переносится?

Question

Я пытаюсь добиться макета в html, который при печати выглядит точно так же:

Comments: _____________________________________________
_______________________________________________________

... где подчеркнутая часть - это какой-то один тег ввода & mdash; то есть это может быть текстовая область или что-то еще, если пользователь может вводить текст и распечатывать его.

Требования:

• Текст "Comments" должен находиться на той же строке, что и первая строка входного текста
• Я не могу просто вставить слово «Комментарии» в текстовую область.
• Я не могу использовать несколько текстовых вводов
• Обе строки ввода должны быть подчеркнуты при печати
• Я не могу рассчитывать на отправку страницы перед печатью: я сделал почти все на стороне клиента.

Причина в том, что мне нужно визуально воссоздать бумажный документ из сторонней компании, чтобы он точно совпадал, когда страница печатается из браузера. Это часть внутренней системы форм, которая предшествует мне в этой компании. Он настроен таким образом, что в этих формах автоматически настраиваются поля и заголовки в браузере, так что это не проблема. Получение этого HTML отформатировано так, как мне нужно это .

Answer 1

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

Для этого потребуется некоторый javascript, который может запускать изменения элементов на новой странице для печати, но это не будет большой проблемой.

Тогда у вас может быть несколько делений с нужным форматом и расположением всего.

Другой вариант - просто нажать на кнопку печати, которая преобразует страницу в pdf. В зависимости от того, что у вас на стороне сервера, есть несколько вариантов.

Answer 2

Попробуйте использовать относительно позиционированный div, он будет содержать текстовую область вместе с другим div, позиционированным абсолютно.

<div id="outer" style="position: relative">
    <textarea id="txtArea" style="text-decoration: underline;"></textarea>
    <div style="position: absolute; left: 5px; top: 5px;">Comments:</div>
</div>

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

Answer 3

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

Для самых простых способов потребуется JavaScript или, может быть, псевдо-селектор CSS: before, ни один из методов не будет идеальным для всех браузеров.

Answer 4

Разве вы не можете просто поместить фоновое изображение в текстовое поле, в котором есть то, что вам нужно («комментарии:» и подчеркивание), а затем просто выполните:

text-indent:5em; /* or whatever works... */

на элементе? Могут быть проблемы с людьми, которые устанавливают свои настройки печати, чтобы не разрешать фоновые изображения. Я не уверен, что это проблема. Кроме того, я не уверен, работает ли text-indent в IE - я в настоящее время на Mac, и он работает с FF и Safari.

РЕДАКТИРОВАТЬ: он работает в IE7 и IE8.

Answer 5

Я вполне уверен, что это невозможно только с помощью HTML и CSS (при условии, что вы хотите, чтобы кто-то мог вводить текст в обе эти строки). Единственный многострочный ввод - это текстовое поле, и оно должно быть квадратным.

Возможно, вы могли бы сделать это с помощью некоторой хитрости javascript, имеющей окно редактора стиля TinyMCE , и использовать javascript, чтобы текст «Комментарии:» оставался в начале, а затем автоматически подчеркивал текст как они входят, чтобы подражать внешности.