Как скрыть текстовое поле мигающего курсора?

Question

Мне нужно скрыть мигающий курсор текстового поля в CSS / Javascript.

Возможно ли это?

Answer 1

Вы можете установить maxlength в текстовом поле и затем использовать text-indent, чтобы переместить курсор назад на большее количество символов, чем максимальная длина.

Например, вы можете установить maxlength=20, а затем для текстового поля установить text-indent: -20em, чтобы текст начинался за границами блока и не появлялся.

Answer 2

Вот мое решение из другого вопроса, на который я уже ответил:

https://stackoverflow.com/a/23472096/1806628

---

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

input[type="text"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
    outline : none;
}

Внимание:

Кажется, он не работает под iOS 8. (Спасибо @Altaveron за информацию)

---

Другая моя идея немного более хакерская и требует javascript.

HTML и CSS часть:

Вы делаете 2 поля ввода и располагаете одно точно поверх другого с помощью z-index и т. Д. Затем вы делаете верхнее поле ввода полностью прозрачным, без фокуса, без цвета и т. П. Вам нужно установить видимый нижний ввод как отключенный, чтобы он отображал только содержимое вышеуказанного ввода, но на самом деле не работает.

Часть Javascript:

После всего вышеперечисленного вы синхронизируете два входа. При нажатии клавиши или при изменении вы копируете содержимое верхнего входа в нижний.

Суммируя все вышеперечисленное: вы вводите невидимый ввод, и он будет отправлен на сервер при отправке формы, но каждое обновление текста в нем будет отображаться в нижнем видимом, но отключенном поле ввода.

Answer 3

Это довольно старый, но я просто имел дело с подобной проблемой. Для браузеров, которые поддерживают его (т.е. не IE8), вы можете установить цвет элемента ввода таким же, как его фон (возможно, белый), и тогда курсор будет невидимым.

Answer 4

<input type=text disabled="disabled"/>

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

редактирование:

i угадайте вы хотите разрешить пользователю прокручивать текст, который больше области, но не показывает мигающий?

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

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

, а затем ограничить размер с помощью родительского элемента div с помощью CSS overflow: hidden или scroll.

<div style="overflow: scroll-x;"><input size=255 value="some string 255 char long" /></div>

Answer 5

Если это вход с атрибутом readonly = "readonly", Safari на iOS все еще показывает мигающий курсор при фокусировке на нем.

Итак, чтобы убрать мигание, у меня сработало следующее:

-webkit-user-select: none; 
user-select: none;