Можно ли вводить поля ввода только для чтения через CSS?

Question

Я знаю, что элементы ввода становятся доступными только для чтения, применяя логический атрибут 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 может быть идеальным решением.

Любые идеи?

Answer 1

С CSS только? Это своего рода возможно на вводе текста с помощью user-select:none:

.print { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;   
} 

JSFiddle example.

Стоит отметить, что это не сработает в browsers which do not support CSS3 or support the user-select property. Свойство readonly должно быть идеально отнесено к разметке ввода, которую вы хотите сделать только для чтения, но это работает как хакерская альтернатива CSS.

С помощью JavaScript:

document.getElementById("myReadonlyInput").setAttribute("readonly", "true"); 

Edit: Метод CSS больше не работает в Chrome (29). Свойство -webkit-user-select теперь игнорируется на входных элементах.

Answer 2

Поведение CSS не может быть установлено. Единственный способ отключить что-то в CSS - сделать его невидимым, либо установив display:none, либо просто поместив div с прозрачным img поверх него и изменив их z-порядки, чтобы отключить пользователя, фокусируясь на нем с помощью мыши. Хотя пользователь все равно сможет сфокусироваться на вкладке из другого поля.

Answer 3

Невозможно (с текущими браузерами) сделать поле ввода только для чтения только с помощью CSS.

Хотя, как вы уже упоминали, вы можете применить атрибут readonly='readonly'.

Если ваши основные критерии состоят в том, чтобы не изменять разметку в источнике, есть способы получить это, ненавязчиво, с помощью javascript.

С JQuery, это легко:

$('input').attr('readonly', 'readonly'); 

Или даже с простым Javascript:

document.getElementById('someId').setAttribute('readonly', 'readonly'); 

Answer 4

Надеется, что это поможет.

input[readonly="readonly"] 
{ 
    background-color:blue; 
} 

ссылка:

http://jsfiddle.net/uzyH5/1/

Answer 5

Вы не установить поведение элементов управления с помощью CSS, только их styling.You можно использовать jquery или просто javascript изменить свойство полей.

Answer 6

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

Уловка: Оберните поле ввода с помощью div и сделайте его относительным, поместите прозрачное изображение внутри div и сделайте его абсолютным над текстовым полем ввода, чтобы никто не мог его редактировать.

CSS

.txtBox{ 
    width:250px; 
    height:25px; 
    position:relative; 
} 
.txtBox input{ 
    width:250px; 
    height:25px; 
} 
.txtBox img{ 
    position:absolute; 
    top:0; 
    left:0 
} 

HTML

<div class="txtBox"> 
<input name="" type="text" value="Text Box" /> 
<img src="http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif" width="250" height="25" alt="" /> 
</div> 

jsFiddle File

Answer 7

Почему не скрывают входной элемент и заменить его элементом этикетки с таким же содержанием?

Я озадачен тем, как приложение React TODOMVC выполнило эту же задачу, и это стратегия, с которой они столкнулись.

Чтобы увидеть это в действии, ознакомьтесь с приложением ниже и просмотрите свойства CSS элементов TODO, когда вы дважды щелкните их, а затем нажмите.

http://todomvc.com/examples/react-backbone/#/

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

Answer 8

Не совсем то, что вам нужно, но это может помочь и задать вопрос здесь в зависимости от того, чего вы хотите достичь.

Вы можете предотвратить все события указателя для отправки на вход, используя свойство CSS: pointer-events:none Это будет своего рода добавить слой поверх элемента, который будет препятствовать вам щелкнуть в нем ... Вы можете также добавьте cursor:text к родительскому элементу, чтобы вернуть стиль текстового курсора на вход ...

Полезно, например, когда вы не можете изменить JS/HTML модуля .. и вы можете просто настроить это css.

JSFIDDLE