Скрытие мигающего курсора в поле ввода: readonly и jQuery

Быстрый ответ

Для того чтобы скрыть мигающий курсор в текстовом поле, используйте свойство caret-color: transparent в CSS для <input>. Стилизацию текста-подсказки можно провести через псевдокласс ::placeholder.

input.hide-cursor::placeholder {
  color: #000;
}

input.hide-cursor {
  caret-color: transparent;
}

Примените этот класс к элементу <input>:

<input type="text" class="hide-cursor" placeholder="Введите текст">

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

Пошаговое руководство

Рассмотрим различные методы и их комбинации для скрытия мигающего курсора:

Подбор цвета курсора к фоновому цвету поля ввода

Чтобы курсор не был слишком заметным, его цвет можно сделать идентичным фону поля ввода:

input.camo-cursor {
  caret-color: #FFFFFF;
}

Подробнее об этом расскажет наш спикер на видео

"Readonly"-поле — это уже несколько другое

Свойство readonly защитит поле от изменений, однако не скроет мигающий курсор. Для этого лучше подойдет следующий метод:

input.readonly-cursor {
  caret-color: transparent;
}

Интерактивное поле без мигающего курсора

Для создания интерактивных полей без возможности редактирования и без курсора можно использовать JavaScript:

document.querySelector('.no-cursor').addEventListener('mousedown', function(event) {
  event.preventDefault();
});

Достаточно просто назначить класс <input>, и всё готово:

<input type="text" class="no-cursor">

Удаляем курсор с помощью jQuery

Для того чтобы курсор исчезал после активации поля, можно применить метод blur() из jQuery:

$('input').focus(function(){
  $(this).blur();
});

Читаемость текста без курсора

Чтобы текст был читаемым без курсора, можно добавить светлую тень тексту:

input.no-cursor {
  caret-color: transparent;
  text-shadow: 0px 0px 1px #000;
}

Оформление полей ввода для улучшения визуального восприятия

Настройка отступов и границ текстового поля, помогает улучшить его внешний вид и скрыть курсор:

input.squeeze-cursor {
  caret-color: transparent;
  padding: 10px;
  margin: 5px;
}

Поля ввода без курсора сохраняют свою функциональность

Поля для ввода могут функционировать и без курсора, не требуя применения атрибута disabled:

<input type="text" class="functional-cursor-less">

Стилизация поля ввода в контексте родительского div

Оформление через вложенность с родительским контейнером div может быть хорошим решением для управления видимостью курсора:

<div class="input-wrapper">
  <input type="text" class="hide-cursor">
</div>

Визуализация

Проиллюстрируем процесс исчезновения курсора:

До: .......|....... (Курсор всегда на виду, всегда не к месту)

Применим CSS для скрытия курсора:

input { caret-color: transparent;} /* Вот и идеальное "прятки" для курсора! */

После: ......... (Теперь спокойствие...)

Полезные материалы

1. MDN Web Docs – caret-color — CSS: Cascading Style Sheets — Всё о свойстве caret-color.
2. Stack Overflow – How can I hide the cursor in an input field? — Разнообразные подходы и обсуждение нашей темы.
3. W3Schools – CSS :focus Selector — Описание селектора :focus.
4. A List Apart – Never Use a Warning When you Mean Undo — Исследование поведения пользователей, выходящее за рамки простого визуального оформления.
5. Smashing Magazine – UX And HTML5: Mobile Form Part 2 — Продвинутые идеи по использованию форм в HTML5.
6. CSS Basic User Interface Module Level 4 — Ознакомьтесь с рабочим черновиком W3C о caret-color.
7. WebAIM: Keyboard Accessibility — Интересные размышления о доступности для пользователей, предпочитающих клавиатурное управление взаимодействию с мышью.