Comment utiliser ce curseur carré dans un champ de saisie HTML?

Comment puis-je utiliser ce curseur carré (image ci-dessous) dans les tags d'entrée?

C: \ WIKIPEDIA

Échantillon

Échantillon

J'ai changé la façon dont cela fonctionne , et il semble résoudre quelques problèmes 🙂

  • Accepte tout texte qu'une entrée normale peut
  • Backspace works
  • Théoriquement, vous pouvez soutenir le collage du texte

Les mises en garde habituelles s'appliquent encore, notamment l'incapacité de visualiser visuellement le caret.

Je penserais longuement si cette solution vaut la peine d'être mise en œuvre, en fonction de ses inconvénients et de ses problèmes d'utilisabilité.

$(function() { var cursor; $('#cmd').click(function() { $('input').focus(); cursor = window.setInterval(function() { if ($('#cursor').css('visibility') === 'visible') { $('#cursor').css({ visibility: 'hidden' }); } else { $('#cursor').css({ visibility: 'visible' }); } }, 500); }); $('input').keyup(function() { $('#cmd span').text($(this).val()); }); $('input').blur(function() { clearInterval(cursor); $('#cursor').css({ visibility: 'visible' }); }); }); 
 #cmd { font-family: courier; font-size: 14px; background: black; color: #21f838; padding: 5px; overflow: hidden; } #cmd span { float: left; padding-left: 3px; white-space: pre; } #cursor { float: left; width: 5px; height: 14px; background: #21f838; } input { width: 0; height: 0; opacity: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cmd"> <span></span> <div id="cursor"></div> </div> <input type="text" name="command" value="" /> 

AFAIK, ce n'est pas possible pour la boîte de texte html, vous pouvez style l'entrée elle-même, mais vous ne pouvez rien faire sur le curseur autre que l'application des options de curseur déjà disponibles 🙁

Pour <input> balises <input> , il n'y a pas beaucoup que vous pouvez faire. Si vous ne vous dérangez pas d'être un hack horrible, vous pouvez toujours utiliser JavaScript pour redimensionner la zone de texte au besoin (définir width = *something* * count ) et avoir un <img> avec le curseur vers la droite.

Je ne pense pas qu'il y ait moins de solutions "ugh", la barre qui traite le texte vous-même, ce qui est probablement un problème excessif.

Vous ne pouvez pas. Ce qui signifie: vous pourriez le faire vous-même en utilisant une police fixe, utilisez un fond d'écran gif de clignotant, quelle position est définie dynamiquement en calculant le avec le texte déjà tapé – mais il y aura le curseur "normal" au-dessus de votre GIF, Rendre cette solution moche

Vous devriez 1) rouler votre propre boîte de texte et 2) cacher le curseur réel en le concentrant continuellement ailleurs. Ensuite, capturez les événements clés au niveau du document / du corps et insérez cette valeur dans votre propre élément. Le curseur serait alors un GIF animé qui était toujours positionné à l'extrême droite de votre "zone de texte".

Vous rencontrerez des problèmes avec le numéro 2, et le tout n'est généralement pas recommandé. HTML 5 ouvre de nouvelles possibilités, mais il reste encore beaucoup de travail pour un curseur.