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

cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

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

Синтаксис

Значения

url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. auto Вид курсора по умолчанию для текущего элемента. inherit Наследует значение родителя.

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора

Вид	Значение	Тест	Пример
	default	P
	crosshair	P
	help	P
	move	P
	pointer	P
	progress	P
	text	P
	wait	P
	n-resize	P
	ne-resize	P
	e-resize	P
	se-resize	P
	s-resize	P
	sw-resize	P
	w-resize	P
	nw-resize	P

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

При добавлении курсора из файла синтаксис несколько видоизменится.

cursor: url(‘путь к курсору1’), url(‘путь к курсору2’), .

Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.

HTML5 CSS2.1 IE Cr Op Sa Fx

    cursor .cross < cursor: crosshair; >.help

Результат данного примера показан на рис. 1.

Применение свойства cursor

Рис. 1. Применение свойства cursor

HTML5 CSS2.1 IE Cr Op Sa Fx

    cursor   Обычный текст





 Ссылка 1 Ссылка 2 Ссылка 3

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

[window.]document.getElementById(» elementID «).style.cursor

Браузеры

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand , которое является аналогом значения pointer . Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll , col-resize , no-drop , not-allowed , row-resize , vertical-text . Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand ).

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Opera не работает с файлами курсора.

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

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

.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.

Курсы javascript

Создаю визуальный редактор, где будут специальные кнопки для добавления цветовых блоков. Всего их будет 5. Я решила сделать так что при щелчке добавляется блок и автоматически устанавливается курсор для печатания, чтобы пользователь мог сразу напечатать текст. Столкнулась с такой проблемой, что мигающий курсор добавляется, только в первый блок при повторном использовании просто создается блок а курсор не добавляется. Как это исправить, чтобы в каждый новый блок размещался курсор, для печатания текста?

     Доавление полей /*стили заметок*/ .shortcodestyle < font: 14px arial; line-height: 1.4; padding: 15px 15px 15px 75px; word-wrap: break-word; border-radius: 2px; clear: both; margin: 10px auto; max-width: 660px; position: relative; text-decoration:none; >/*Внимание*/ .warning < background: #fff2b8 url("images/warning.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #EAD18C; color: #4F2012; >.warning a < color: #D15225; >/*Информация*/ .info < background: #bae5f8 url("images/info.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #9BBFC4; color: #0F2B33; >.info a < color: #216CAF; >/*Важно*/ .important < background: #ffcaca url("images/important.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #f4a9a9; color: #330D0D; >.important a < color: #ff3a37; >/*Совет*/ .advice < background: #ccfacc url("images/advice.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #b1dbb1; color: #0b280b; >.advice a < color: #5E9800; >/*Нейтральность*/ .neutrality < background: #f5f5f5 url("images/neutrality.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #dfdfdf; color: #222; >.neutrality a

20.04.2022, 17:46
Регистрация: 27.05.2010
Сообщений: 33,031
Katy93,

     Доавление полей /*стили заметок*/ .shortcodestyle < font: 14px arial; line-height: 1.4; padding: 15px 15px 15px 75px; word-wrap: break-word; border-radius: 2px; clear: both; margin: 10px auto; max-width: 660px; position: relative; text-decoration: none; >/*Внимание*/ .warning < background: #fff2b8 url("images/warning.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #EAD18C; color: #4F2012; >.warning a < color: #D15225; >/*Информация*/ .info < background: #bae5f8 url("images/info.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #9BBFC4; color: #0F2B33; >.info a < color: #216CAF; >/*Важно*/ .important < background: #ffcaca url("images/important.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #f4a9a9; color: #330D0D; >.important a < color: #ff3a37; >/*Совет*/ .advice < background: #ccfacc url("images/advice.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #b1dbb1; color: #0b280b; >.advice a < color: #5E9800; >/*Нейтральность*/ .neutrality < background: #f5f5f5 url("images/neutrality.png") no-repeat scroll 15px 50%; border-bottom: 2px solid #dfdfdf; color: #222; >.neutrality a

20.04.2022, 20:26
Кандидат Javascript-наук
Регистрация: 28.12.2018
Сообщений: 137

Спасибо работает, это тестовый пример я собираюсь перенести это на основной редактор. Только в главном редакторе у меня нет внутреннего контейнера с классом component. Я этот контейнер добавила, чтобы была возможность использовать insertBefore. Так как он принимает два значение. 1. Элемент который нужно вставить и 2. Элемент перед которым нужно вставить.

var rangeElement = document.createElement("div"); rangeElement.setAttribute("class", myclass); rangeElement.innerHTML = " "; var sp1 = document.getElementsByClassName("editable")[0]; var sp2 = document.getElementsByClassName("component")[0]; sp1.insertBefore(rangeElement, sp2);

Раз такого элемента как компонент у меня отсутствует в основном редакторе. Существует ли возможность по другому сделать вставку?