Как можно улучшить код?

Question

[ZierKana]

В общем требуется сделать так, чтобы в поле ввода постоянно мигала каретка, но по сути там её быть не должно, а когда туда её ставишь искусственная каретка должна пропасть. Вот как я это сделала: https://jsfiddle.net/j6v8k7gs/
Работает на локальном сайте как надо(на jsfiddle почему то настоящая каретка не показывается, да и фиг с ней)
Всё ок, только вот чувствую, что это полнейший говнокод от начала и до конца. Подскажите можно ли как то сделать более красиво? Допускаю вариант с добавлением класса по клику через js, но как то всё равно не то, думаю что можно проще на одном css.

Answer 1

[Алексей Струков]

Можно на одном css в общем
Для начала обернуть все в див и сделать ему position: relative, чтобы курсор относительно него позиционировался а не относительно body.
Потом удалить все из кейфрэймс кроме 0% и 50%
Время анимации подобрать так чтобы оно совпадало с временем мигания настоящего курсора и добавить функцию step(2)
Далее подогнать размер мигающего курсора под реальный курсор ( у вас там 10 px почему то).
В классе с input убрать background-color: transparent.
Вместо отрицательного маргина у span лучше думаю использовать left(right) и bottom(top) чтобы подогнать курсор в нужную позицию.
Ну и джаваскриптом возможно это все проще будет сделать и правильней, но на css тоже возможно если так уж нужно)