Возможно ли, чтобы элемент ввода имел курсор без фокуса?

Question

Итак, это уникальный сценарий.

Это веб-приложение, которое не доступно нигде, кроме как на приставке. Периферийным для этого приложения является телевизор пульт дистанционного управления.

i.e: NO клавиатура, NO mouse.

Конечно, при фокусировке входного элемента курсор появляется и мигает в текущем положении. Вы вводите символы, они отображаются, а курсор автоматически авансы. whoohoo!

Но нам нужно повторить это поведение , когда элемент ввода не сфокусирован.

Такое поведение наблюдается в основном в видеоиграх и других телевизионных/больших экранных интерфейсах. У вас есть экранная клавиатура, и вы выбираете символы, перемещаясь по букве или цифре, и нажав кнопку ввода/выбора или любую кнопку «выберите» для этой платформы (например, кнопку «X» на Playstation). Буква появляется в поле ввода, cursor продвигается, но фактический элемент с фокусом - это текущий ключ на экранной клавиатуре.

Мы пытались сделать клавиатуру с помощью <div> тегов, но тогда мы потеряем поведение очень удобной placeholder ATTR, и это просто беспорядок логики воссоздавать то, что cursor и placeholder должны делать. Мне бы хотелось, чтобы cursor ВСЕГДА был на входном элементе сразу после последнего символа и НЕ присутствовал, когда вход не имеет значения, показывая только placeholder="Search". Почти похоже на то, что мне нужно иметь два элемента на странице с фокусом, что невозможно, насколько я знаю.

Но возможно ли, что элемент ввода не сфокусирован и все еще видит курсор? Или мы придерживаемся других тегов и воссоздаем это поведение с нуля?

Очистка интернета, я не нашел решения. Решения jQuery приемлемы.

Answer 1

Я не знаю, правильно ли я понимаю ваш вопрос, но вы можете имитировать курсор с символом |. Я собрал быстрый пример, который может вам помочь.

example fiddle

HTML

<input id="cursor" type="text"> 

JS

window.setInterval(function(){ 
    input=$("#cursor") 

    if(!input.is(":focus") && (input.val()=='' || input.val()=='|')){ 
     if(input.val()==''){input.val("|");} 
     else if(input.val()=='|'){input.val("");} 

    } 
    else{} 
}, 500);