Как называется мигающий курсор при вводе текста
Перейти к содержимому

Как называется мигающий курсор при вводе текста

  • автор:

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

Забытая история анимации, которая более полувека помогает пользователям писать быстрее: начиналось с моряка и Apple, а сегодня она есть почти во всех программах, сервисах, соцсетях — и в дополненной реальности.

Забытая история мигающего курсора Иллюстрация Александра Гландиена, Inverse

Привычный мигающий компьютерный курсор был запатентован в феврале 1970 года малоизвестным американским инженером Чарльзом Кислингом, а представлен в 1977 году на презентации компьютеров Apple II. Историю незаметного элемента интерфейса, который сильно упростил редактирование текстов, рассказывает Inverse.

Как работалось за компьютером до появления мигающего курсора

Одними из первых пользователей компьютерных терминалов (в том числе телетайпов) в 1960-х годах были издатели и составители книг. Предполагалось, что компьютеры ускоряют подготовку текстов, но в реальности работа без мыши, которую изобрели только в 1964 году, была настоящим кошмаром.

Предпечатная подготовка книги Фото Билла Брандта, Picture Post, Getty Images

Редакторы издательств, уставшие от рутинной работы за компьютерами, распечатывали фрагменты текста, чтобы отметить правки ручкой, а затем вводили весь текст заново. Несмотря на то, что текстовые файлы уже можно было записывать на магнитную ленту, ранние программы для предпечатной подготовки книг не умели сохранять макеты — расположение текста на страницах, отступы и даже свойства гарнитуры. Эти параметры каждый раз заново вводили перед печатью.

Особенно тяжело работалось составителям словарей и академических справочников: так, с проблемами столкнулись создатели Оксфордского словаря английского языка для школьников, выходившего в начале 1960-х годов, рассказал Inverse британский историк книгопечатания Пол Луна.

Внезапно эти бедные люди [издатели] столкнулись с экраном и массивом зелёного текста, который вы всё равно не могли прочитать: половина текста была абракадаброй, в которой время от времени встречались слова.

Но даже когда у издателей появилась возможность сохранять макеты, работа не становилась проще. Определить, с какой частью текста работает оператор компьютера, было по-прежнему трудно, рассказал Inverse Томас Хей, профессор истории технологий Университета Висконсин-Милуоки. Ситуация не менялась вплоть до начала 70-х годов.

Кто и как изобрёл мигающий курсор

Чальз Кислинг Фото: часовня Морриса Нильсена

Американец шотландского происхождения Чарльз Кислинг родился в 1930 году в городке Мёрдок в штате Миннесота. Во время корейской войны будущий изобретатель служил на авианосце Collette DD 730, а после службы увлёкся электроникой и стал одним из инженеров, которые обслуживали огромные компьютеры того времени, вроде ENIAC.

С 1955-го года Кислинг стал разработчиком в компании по производству военной техники и электроники Sperry Rand, где создавал микросхемы и программы для персональных компьютеров. Например, он создавал микросхемы, которые позволяют компьютерам обрабатывать сложные условные операторы.

Кислинг известен двумя изобретениями: первое — система отображения текста на экране компьютера с минимальной задержкой. Она позволяла получать результаты работы программ в реальном времени. Второе — мигающий курсор, или мерцающая метка на экране, которая показывает пользователю, в какой части страницы происходит работа с текстом. По данным библиотеки патентов Google, заявка на него зарегистрирована в 1968 году, а сам патент присвоен изобретателю в феврале 1970 года.

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

Помню, как он объяснил мне причину мигания курсора, и это было просто. Он рассказал, что на экране нет ничего, что могло бы подсказать, где находится курсор. Поэтому он и написал код, чтобы знать, в каком месте экрана начнётся печать.

Кислинг проработал в Sperry Rand 38 лет и вышел на пенсию в 1994 году. Отойдя от дел, изобретатель занялся общественным активизмом. Кислинг умер в 2014 году в кругу семьи. Он прожил 83 года.

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

Мигающий курсор, каким мы его знаем, впервые появился в компьютерах Apple II и Apple Lisa, вышедших, соответственно, в 1977 и 1983 годах. Курсор добавил изобретатель и сооснователь Apple Стив Возняк, заметивший случайное мерцание каретки во время работы над другой функцией компьютера.

Ради мигающего курсора Возняк пожертвовал вводом строчных символов в Apple II: компьютер его не поддерживает.

Мигающий текстовый курсор Chrome

Мигающий текстовый курсор Chrome

Мигающий курсор, текстового ввода, вертикальная черта, используется для указания точки ввода. Например, поля формы. Курсор мигает показывая текущую точку для ввода данных, текста.

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

Мигающий указатель — это функция специальных возможностей, с названием «переход по страницам с помощью текстового курсора». Или «режим активного курсора». Если функция не мешает, то все можно оставить как есть. Мигающий курсор помогает лучше понимать где находится фокус сейчас и куда происходит перемещение.

Чтобы отключить режим активного курсора достаточно нажать F7.

Если есть желание отключить активный курсор глобально, то используйте настройки браузера.

Sign up for more like this.

Enter your email

Bulma 1.0.0

Bulma 1.0.0

Большое, знаковое событие в экосистеме Bulma. Новый релиз 1.0.0. Движение к новой версии заняло несколько лет. И что в итоге? Стиль Bulma v1 полностью переписан «с нуля», используется Dart Sass. Что осталось прежним? Все HTML-сниппеты остались прежними. То есть общая логика стиля всех компонентов осталась прежней. Это означает,

2 апр. 2024 г. 1 min read

Ruby: nil? empty? blank? present?

В Ruby on Rails доступны несколько методов для проверки существования значения или состояния объекта. Ruby предлагает nil?, empty? и Rails добавляет blank? и present?. Каждый из методов имеет свою логику и назначение. И конечно предполагает применение в нужном контексте. nil? Метод класса Object в Ruby. Что означает его повсеместную доступность.

12 дек. 2023 г. 1 min read

Vim — проверка орфографии

Vim проверенный временем, просто и одновременно мощный редактор. Одна из позитивных возможностей — проверка орфографии. Допустим, что настройки редактора в домашней директории пользователя в файле ~/.vimrc. Добавим: set spell spelllang=ru_ru,en_us Можно это сделать и в редакторе, выполнив команду: :set spell spelllang=ru_ru Но если редактором пользуемся

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

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

.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,820 4 4 золотых знака 34 34 серебряных знака 70 70 бронзовых знаков
только имитировать его — 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,443 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; >>
 

Отслеживать
ответ дан 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.

Курсор ввода в любом месте окна браузеров?

5b548a5db2499922684659.jpeg

Недавно обнаружил такой баг в браузерах в Win10: при клике в любом месте документа в браузере появляется мигающий курсор, как в инпуте. Кто-нибудь с таким сталкивался? На работу не влияет, но выглядит странно. Скриншот прилагается.

  • Вопрос задан более трёх лет назад
  • 48768 просмотров

2 комментария

Простой 2 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *