it-swarm.com.ru

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

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

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

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

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

Решения Javascript приветствуются.

39
Wesley Murch

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

<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" >
42
n3on

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

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

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

caret-color: transparent;

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

5
Muhammad Husein

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

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

или JQuery

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

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

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

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

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

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

0
andora

Легко!

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

0
Tusko Trush