web-dev-qa-db-ja.com

この四角いカーソルをHTML入力フィールドで使用するにはどうすればよいですか？

この四角いカーソル（下の画像）を入力タグで使用するにはどうすればよいですか？

C:\WIKIPEDIA

javascripthtmlcssxhtmlcursor
22
xRobot

サンプル

Sample

私は それがどのように機能するかを変更しました 、そしてそれはいくつかの問題を解決するようです:)

  • 通常の入力でできるすべてのテキストを受け入れます
  • バックスペースは機能します
  • 理論的にはテキストの貼り付けをサポートできます

通常の警告は依然として適用されます。特に、キャレットがどこにあるかを視覚的に確認できないことが顕著です。

その欠点と使いやすさの問題に基づいて、このソリューションを実装する価値があるかどうかは長くて難しいと思います。

$(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="" />
37
alex

AFAIK、これはhtmlテキストボックスでは不可能です。入力自体のスタイルを設定することはできますが、既に使用可能なカーソルオプションを適用する以外にカーソルについては何もできません:(

2
Sarfraz

ために <input>タグ、できることはあまりありません。恐ろしいハッキングであることを気にしないのであれば、いつでもJavaScriptを使用して、必要に応じてテキストボックスのサイズを変更できます（set width = *something* * count）、および<img>カーソルを右に置きます。

私は、テキスト入力を自分で処理するバーという、それほど「難しい」解決策はないと思います。これはおそらくやり過ぎです。

2
Lucas Jones

1）独自のテキストボックスをロールし、2）他の場所に継続的にフォーカスして、実際のカーソルを非表示にする必要があります。次に、ドキュメント/本文レベルで主要なイベントをキャプチャし、その値を独自の要素に挿入します。カーソルは、常に「テキストボックス」の右端に配置されたアニメーションGIFになります。

＃2で問題が発生するため、通常はすべてをお勧めしません。 HTML 5はいくつかの新しい可能性を開きますが、それでもカーソルにとっては非常に多くの作業です。

0
Tim Medora

できません。つまり、あなたcould固定フォントを使用して自分でそれを行い、すでに入力されたテキストのwithを計算することによって位置が動的に設定される、点滅するgifals背景を使用します-しかし "がありますgifの上にある「通常の」カーソル。

0
oezi