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

Question

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

0

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

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

Как я могу это сделать?

Я думал об <span> обертывании | символ, который мигает с помощью анимации, но не может быть html (<span>) в качестве значения или части значения атрибута value.

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

MrGuru 07 май 2014, в 02:45

Источник

2

что вы пробовали?
Black Sheep 07 май 2014, в 00:22
0

@aldanux мигает | символ справа от ввода, но значение ввода значительно меньше ширины ввода.
MrGuru 07 май 2014, в 00:27
0

Какие «другие вещи случаются», что вы пытаетесь предотвратить?
nathancahill 07 май 2014, в 00:30
0

Я имею в виду ... Покажите какой-то код, который вы пробовали ... и было бы хорошо, если бы вы могли сделать скрипку
Black Sheep 07 май 2014, в 00:32

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

@aldanux мигает | символ справа от ввода, но значение ввода значительно меньше ширины ввода.
Какие «другие вещи случаются», что вы пытаетесь предотвратить?
Я имею в виду ... Покажите какой-то код, который вы пробовали ... и было бы хорошо, если бы вы могли сделать скрипку

rjenkins · Answer 1 · 2014-08-21T18-43-00.000Z

Я думаю, что вы были на правильном пути с идеей о том, что обтекание диапазона "|" характер и анимацию. Если вы можете поместить это прямо после вашего элемента ввода, то вы можете использовать общий селектор для сиблинга, чтобы скрыть его, когда фокус ввода (в противном случае у вас есть два курсора), и абсолютно поместите его внутри родительского элемента, чтобы он появился поверх ввода элемент.

Таким образом, ваш HTML будет выглядеть так:

<div id="container">
<input id="input"> </input>
<span id="mock-cursor">|</span>
</div>

Скрытие курсора, когда фокус ввода будет таким, как в CSS:

input:focus ~ #mock-cursor {
    display: none;
}

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

http://codepen.io/rjenkins/pen/sJhHB

Balayesu Chilakalapudi · Answer 2 · 2014-05-06T22-51-00.000Z

Вы можете использовать focus() для выполнения этой задачи. Нет необходимости использовать анимированный символ (|).