☰

HTML 入力フィールドで四角いカーソルを使用するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript html css text-cursor
HTML 入力フィールドで四角いカーソルを使用するにはどうすればいいですか? 質問する

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

C:\ウィキペディア

ベストアンサー1

サンプル

サンプル

私は仕組みを変えた、いくつかの問題は解決したようです :)

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

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

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

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

おすすめ記事