Удаление курсора/указателя текста из целенаправленного ввода только для ввода

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

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

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

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

Приветствуем решения Javascript.

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

Ответ 2

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

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

Ответ 3

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

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

или jQuery

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

Ответ 4

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

caret-color: transparent;

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

Ответ 5

единственный способ, который я нашел для этого, -

//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');

Ответ 6

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

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

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

Ответ 7

Легко!

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