В html как сделать мигающий курсор

caret-color

Задаёт цвет текстового курсора, который отображается в текстовых полях формы ( , ), а также для элементов с атрибутом contenteditable. Такой курсор по аналогии с печатными машинками также называется кареткой и показывает место ввода следующего символа. Как правило, текстовый курсор выглядит как вертикальная мигающая линия.

Краткая информация

Значение по умолчанию	auto
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

caret-color: auto |

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

auto Обычно браузеры используют значение currentColor, но могут подстраивать цвет курсора для его лучшей видимости, основываясь на цвете фона и других параметрах. См цвет.

Песочница

input < padding: 10px; caret-color: >; >

Объектная модель

Объект.style.caretСolor

Спецификация

Спецификация	Статус
CSS Basic User Interface Module Level 3	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

11.3

В таблице браузеров применяются следующие обозначения.

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

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

Справочник CSS

!important
::after
::backdrop
::before
::first-letter
::first-line
::marker
::placeholder
::selection
:active
:blank
:buffering
:checked
:default
:dir
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-within
:fullscreen
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:muted
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:paused
:placeholder-shown
:playing
:read-only
:read-write
:required
:root
:seeking
:stalled
:target
:valid
:visited
:volume-locked
@charset
@document
@font-face
@import
@keyframes
@media
@page
@supports
@viewport
accent-color
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
aspect-ratio
backdrop-filter
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size
block-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
font-family
font-kerning
font-size
font-stretch
font-style
font-variant
font-weight
gap
height
hyphenate-character
hyphenate-limit-chars
hyphens
image-rendering
justify-content
left
letter-spacing
line-clamp
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
marks
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
place-content
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip-ink
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-fill-color
text-indent
text-orientation
text-overflow
text-shadow
text-stroke
text-stroke-color
text-stroke-width
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Мигающий курсор

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

.form label:before < content: ''; display: none; position: absolute; left: 16px; top: 10px; width: 1px; height: 14px; background: #000; opacity: 1; z-index:3; animation: cursor 1s infinite ease; >.form label.cursor:before < display: inline-block; >@keyframes cursor < 50%< background: transparent; >>

Отслеживать
задан 25 авг 2017 в 6:32
2,790 4 4 золотых знака 31 31 серебряный знак 69 69 бронзовых знаков
только имитировать его — input + label:before , ‘animation’
25 авг 2017 в 6:39

Вам не кажется что это смутит пользователя, он будет думать что фокус находится на поле для ввода, начнет заполнять форму и окажется что ввод не происходит потому что фокус совершенно в другом месте.

25 авг 2017 в 7:04

С помощью js и jQuery написать функцию, меняющую cursor: default на cursor: none и обратно по таймеру

25 авг 2017 в 7:14

@Данила Никонец, а подробней можно? Получается, что нужно вызвать метод jquery $(input).focus(); на поле ввода, а если пользователь наведёт курсор на другое поле ввода, то с предыдущего фокус пропадёт

25 авг 2017 в 7:29

@Artem Gorlachev, обновил вопрос, посмотрите пожалуйста, добавил анимацию, но теперь курсор исчезает плавно, а нужно чтобы курсор исчезал не плавно. Как это сделать? jsfiddle.net/7576gmdj

25 авг 2017 в 8:00

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Анимацию можно отключить по step-end . + нужно убирать свой курсор на фокусе, чтобы не пересекался с системным курсором. и еще нужно совсем его удалять на заполненном инпуте.

.form label:before < content: ''; display: none; position: absolute; left: 16px; top: 10px; width: 1px; height: 14px; background: #000; opacity: 1; z-index: 3; >.form input:not(:focus) + label.cursor:before < display: inline-block; animation: cursor 1s infinite step-end; >@keyframes cursor < 50% < background: transparent; >>

Отслеживать
ответ дан 25 авг 2017 в 8:24
Artem Gorlachev Artem Gorlachev
4,425 8 8 серебряных знаков 17 17 бронзовых знаков

// Communicate to DOM that we have JS document.documentElement.setAttribute("class", "js"); var searchFauxInput = document.querySelector(".fb-Search_FauxInput"); var searchBox = document.getElementById("Input"); searchBox.addEventListener("keyup", function copyInput(event) < searchFauxInput.textContent = searchBox.value; searchBox.setAttribute("value", searchBox.value); >, false);

* < box-sizing: border-box; >body < font-family: sans-serif; >.fb-Search < display: -webkit-box; display: -ms-flexbox; display: flex; height: 44px; padding: 5px 70px 5px 5px; width: 400px; position: relative; background-color: #e4e4e4; >.fb-Search_Input < -webkit-appearance: none; -moz-appearance: none; appearance: none; >.js .fb-Search_Input < position: absolute; left: -100vw; >.fb-Search_FauxInput < display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 80%; border: 0; font-size: 20px; font-size: 1.3rem; color: #777; background-color: #e4e4e4; border-right: 1px solid transparent; >.js .fb-Search_FauxInput < display: -webkit-box; display: -ms-flexbox; display: flex; >.fb-Search_Input ~ .fb-Search_FauxInput < -webkit-animation: pulseAttention 1.5s cubic-bezier(.215, .61, .355, 1) forwards infinite; animation: pulseAttention 1.5s cubic-bezier(.215, .61, .355, 1) forwards infinite; >.fb-Search_Label < position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 5px 7px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #a7a7a7; font-size: 15px; >.fb-Search_Input:not([value=""]) ~ .fb-Search_Label < -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; >@-webkit-keyframes pulseAttention < 50% < border-color: #000; >> @keyframes pulseAttention < 50% < border-color: #000; >>

  Search

Отслеживать
ответ дан 25 авг 2017 в 8:20
larrymacbarry larrymacbarry
901 4 4 серебряных знака 11 11 бронзовых знаков

если нужно чтобы пользователь что-то ввел сразу, то можно попробовать

Upd:

For better usability, avoid using autofocus. Automatically focusing on a form control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

Как создать эффект тайпинга текста на сайте

Узнайте, как создать эффект тайпинга текста на вашем сайте с помощью HTML, CSS и JavaScript, делая его более интерактивным.

Person typing with text appearing on the screen

Алексей Кодов
Автор статьи
2 июня 2023 в 11:49

Эффект тайпинга текста, или печати, добавляет интересный визуальный элемент на ваш сайт и может улучшить пользовательский опыт. В этой статье мы рассмотрим, как создать этот эффект с использованием HTML, CSS и JavaScript.

Шаг 1: Создание HTML-структуры

Для начала создадим простую HTML-структуру, которая будет содержать элемент, в котором будет происходить эффект тайпинга текста.

     Тайпинг эффект   |

Здесь мы создали элемент span с идентификатором typed-text , который будет содержать наш текст с эффектом печати. Рядом с ним находится еще один элемент span с классом cursor , который будет отображать мигающий курсор.

Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Шаг 2: Применение CSS-стилей

Теперь добавим немного стилей с помощью CSS, чтобы сделать наш эффект более привлекательным.

body < font-family: 'Courier New', Courier, monospace; text-align: center; >.cursor < font-weight: bold; animation: blink 1s infinite; >@keyframes blink < 0% < opacity: 1; >50% < opacity: 0; >100% < opacity: 1; >>

Здесь мы задаем шрифт для текста и выравниваем его по центру. Для мигающего курсора мы используем анимацию blink , которая меняет прозрачность с 1 (непрозрачный) до 0 (прозрачный) и обратно.

Шаг 3: Добавление JavaScript-кода

Наконец, добавим JavaScript-код для создания эффекта печати текста.

const textToType = "Привет, мир! ��"; const typingSpeed = 100; const typedTextElement = document.getElementById("typed-text"); let currentIndex = 0; function typeText() < if (currentIndex < textToType.length) < typedTextElement.textContent += textToType.charAt(currentIndex); currentIndex++; setTimeout(typeText, typingSpeed); >> typeText();

В этом коде мы определяем текст, который должен быть набран, и скорость набора текста. Затем мы находим элемент typed-text и начинаем набирать текст по одному символу с использованием функции typeText , которая вызывает сама себя с задержкой, определенной в typingSpeed .

Теперь у вас есть простой, но эффективный эффект тайпинга текста на вашем сайте! ��

Не забудьте проверить школу веб-разработки, если хотите углубить свои знания и навыки в этой области.