Удалить текстовую вставку / указатель из фокусированного ввода только для чтения

Question

Я использую <input readonly="readonly">, стилизованный под обычный текст, чтобы удалить вид интерактивного поля, но все равно отображаю значение.

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

Проблема: Мигание каретки все еще появляется, когда поле щелкается / фокусируется. (По крайней мере в FF и IE8 на Win7)

В идеале, я бы хотел, чтобы он вел себя как обычно, фокусируемый, но без мигающей каретки.

Решения для JavaScript приветствуются.

Answer 1

По моему нет карета или около того:

<input type="text" value="test" readonly="readonly" >

Взгляните на это: http://www.cs.tut.fi/~jkorpela/forms/readonly.html

Извините, теперь я понимаю вашу проблему.

Попробуйте это:

<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >

Answer 2

Вы можете использовать это в своем CSS, но оно не будет фокусироваться:

[readonly='readonly'] {
   pointer-events: none;
}

Answer 3

Вы можете удалить мигающую каретку, указав атрибут css в прозрачный

caret-color: transparent;

вы можете проверить результат здесь

Answer 4

Это можно сделать с помощью html и javascript

<input type="text" onfocus="this.blur()" readonly >

или jQuery

$(document).on('focus', 'input[readonly]', function () {
        this.blur();
    });

Answer 5

Легко!

Просто добавьте disabled к вводу, и он не будет активным (фокус)

Answer 6

Метод onfocus / blur работает нормально, чтобы убрать курсор из поля только для чтения, но браузер не автоматически перефокусируется на следующее поле, и вы можете потерять фокус в целом, чего обычно не ожидает пользователь. Таким образом, если это требуется, вы можете использовать обычный javascript, чтобы сосредоточиться на следующем поле, которое вы хотите, но вы должны указать следующее поле:

<input type="text" name="readonly-field" value="read-only" 
readonly onfocus="this.form.NextField.focus()">

Где 'NextField' - это имя поля, которое нужно перейти. (В качестве альтернативы, вы можете предоставить некоторые другие средства для поиска следующего поля). Очевидно, что это более сложно, если вы хотите перейти к какому-то невидимому элементу пользовательского интерфейса, например, к панели вкладок, поскольку вам нужно будет это также упорядочить.

Answer 7

единственный способ найти это был

//FIREFOX
$('INPUT_SELECTOR').focus(function () {
                $(this).blur();
            });
//INTERNET EXPLORER
$('INPUT_SELECTOR').attr('unselectable', 'on');
KENDO
$('.k-ff .k-combobox>span>.k-input').focus(function () {
                $(this).blur();
            });
$('.k-ie .k-combobox>span>.k-input').attr('unselectable', 'on');