25

<input>この四角いカーソル (下の画像) をテキストタグで使用するにはどうすればよいですか?

C:\ウィキペディア

4

6 に答える 6

41

サンプル

サンプル

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

  • 通常の入力が可能な任意のテキストを受け入れます
  • バックスペース機能
  • 理論的にはテキストの貼り付けをサポートできます

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

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

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

于 2010-09-21T07:16:04.177 に答える
2

できません。つまり、fixed-with フォントを使用して自分で行うことができます。既に入力されたテキストの with を計算することで位置が動的に設定される点滅する gif の背景を使用しますが、gif の上に「通常の」カーソルが表示されます。このソリューションを醜くする

于 2010-09-21T07:17:07.777 に答える
2

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

テキスト入力を自分で処理するバーは、おそらくやり過ぎです。

于 2010-09-21T07:17:17.140 に答える
2

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

于 2010-09-21T07:11:37.010 に答える
0

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

＃2で問題が発生し、全体として一般的にはお勧めできません. HTML 5 はいくつかの新しい可能性を開きますが、それでもカーソルの作業は非常に多くなります。

于 2010-09-21T07:21:58.900 に答える