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

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

Есть идеи?

Ответы

Ответ 1

Только с CSS? Это возможно для текстовых входов с помощью user-select:none:

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

Пример JSFiddle.

Стоит отметить, что это не будет работать в браузерах, которые не поддерживают CSS3 или поддерживают свойство user-select. Свойство readonly должно идеально соответствовать входной разметке, которую вы хотите сделать readonly, но это работает как хакерская альтернатива CSS.

С JavaScript:

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

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

Ответ 2

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

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

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

С jQuery это легко:

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

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

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

Ответ 3

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

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

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

JSFIDDLE

Ответ 4

Это невозможно с помощью 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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

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

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

Ответ 8

Атрибут read-only в HTML используется для создания текстового ввода, недоступного для редактирования. Но в случае CSS свойство pointer-events используется для остановки событий указателя.

Синтаксис:

pointer-events: none;

Пример: в этом примере показаны два входных текста, один из которых недоступен для редактирования.

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            Disable Text Input field 
        </title> 

        <style> 
        .inputClass { 
            pointer-events: none; 
        } 
        </style> 
    </head> 

    <body style = "text-align:center;">
        Non-editable:<input class="inputClass" name="input" value="NonEditable"> 

        <br><br> 

        Editable:<input name="input" value="Editable"> 
    </body> 
</html>

Ответ 9

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

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

Справка:

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