Print Stylesheet - преобразование входных данных в текст

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

input
{
border-style: none;
}

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

Ответ 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; }

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

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

Ответ 4

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

Ответ 5

Я использую ASP.NET и имею ту же проблему.

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

В окне @media:

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

В печати @media:

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

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

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

Никаких сценариев не требуется.

Ответ 6

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

width: ?cm

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

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

Ответ 7

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

@media print {    
  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}