Таблица стилей печати - Преобразование входных данных в текст

Question

У меня есть таблица, в которой есть несколько полей <input type="text">, и я хочу, чтобы они отображались как обычный текст при печати. Я установил таблицу стилей media = "print" с

input
{
border-style: none;
}

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

Кто-то на других форумах предложил использовать кнопку печати, которая создает сценарии на стороне клиента для физического изменения разметки страницы, но, к сожалению, это не очень практично из-за сложности и динамического характера страницы.

Я почти уверен, что это невозможно, но я подумал, что спросить.

Answer 1

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

• Для каждого элемента ввода вы должны создать рядом с ним <span> и присвоить ему класс, который скрыт в таблице стилей media="screen" и отображается в media="print".

• Сам элемент ввода получит класс, который работает наоборот, видимый в screen и скрытый в print.

• Каждый элемент ввода получит событие change, которое обновит соседний span.

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

Бьюсь об заклад, если вы пометите вопрос или зададите новый, один из наших постоянных гуру JQuery взглянет на него:)

Answer 2

Если вы используете Bootstrap:

@media print {
  .no-print {
    display: none !important;
  }

  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
  }
}

Answer 3

Я наткнулся на этот поиск информации о том, как стилизовать мои формы, и нескольких других вещах.

После того, как я немного поигрался с CSS, я понял, что метод CSS работает только для меня.

Все мои формы имеют стили, включающие цветной фон и черную рамку.

В своем файле CSS для печати я скопировал форму CSS и изменил все цвета (не сам текст) на белый. Другими словами, он скрывает мое текстовое поле и отображает только текст.

Оригинальный CSS - #form textarea, #form input, #form select {border: 1px solid #ddd; цвет: # 313131; }

Печать CSS - #form textarea, #form input, #form select {border: 1px solid #fff; цвет: #fff; }

Работает как шарм =>

Надеюсь, это поможет

Answer 4

Чтобы определить ширину полей ввода в разделе печати CSS, используйте:

width: ?cm 

для соответствующих элементов ввода.

Проверено в Firefox; возможно, он не работал в предыдущих версиях браузера.

Answer 5

Я использую ASP.NET, и у меня возникла та же проблема.

Я решил это, добавив метку, соответствующую моему текстовому полю, и настроил два класса:

На экране @media:

.hdnPrint {visibility:visible;display:block;}
.visPrint {visibility:hidden;display:none;}

In @media print:

.hdnPrint {visibility:hidden;display:none;}
.visPrint {visibility:visible;display:block;}

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

Я предполагаю, что вы можете сделать нечто подобное в среде, отличной от ASP.NET, следуя тому же шаблону.

Сценарии не требуются.

Answer 6

input { border-style: none; display: inline}