Я знаю, что элементы ввода становятся доступными только для чтения, применяя логический атрибут readonly
и являясь атрибутом, на который это не влияет CSS.
С другой стороны, мой сценарий, похоже, очень подходит для CSS, поэтому я надеялся, что есть какой-то трюк CSS, который позволит мне это сделать. У меня есть гиперссылка для печати на моей форме. При нажатии на него отображается... версия для печати документа. Это в основном материал CSS, мой print.css выглядит так:
html.print {
width: 8.57in;
}
.print body {
font: 9pt/1.5 Arial, sans-serif;
margin: 0 1in;
overflow: auto;
}
.print #header, .print #footer {
display: none;
}
.print .content {
background-color: white;
overflow: auto;
}
.print .fieldset > div.legend:first-child {
background: white;
}
.print ::-webkit-input-placeholder {
/* WebKit browsers */
color: transparent;
}
.print :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: transparent;
}
.print ::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: transparent;
}
.print :-ms-input-placeholder {
/* Internet Explorer 10+ */
color: transparent;
}
.print .check-mark {
display: inline;
}
.print input[type=checkbox] {
display: none;
}
.print .boolean-false {
display: none;
}
Также есть несколько частей javascript, таких как:
- Добавление класса
print
в элемент html - Отображение таблиц без полос прокрутки
- Несколько других второстепенных вещей, таких как скрытие всплывающих окон.
Моя текущая проблема - это поля ввода. Они должны быть доступны только для чтения, однако я понятия не имею, как это сделать с минимальными изменениями кода. CSS может быть идеальным решением.
Есть идеи?