如何在HTML输入字段中使用此方形游标？ [英] How to use this square cursor in a HTML input field?

问题描述

如何在输入标签中使用这个方形游标（下图）？

解决方案

示例

ve 更改了如何工作，似乎解决了几个问题：）

• 接受正常输入的任何文字


• Backspace工作


• 可支持粘贴文字

通常的注意事项仍然适用，最明显的是无法直观地看到插入符号的位置。

根据其缺点和可用性问题，我认为长时间是否值得实施此解决方案。

$（function（）{var cursor; $（'＃cmd'）。click（function（）{$（'input'）。focus（）; cursor = window.setInterval（function（）{if（$（'＃cursor'）。css ）; css（{visibility：'hidden'}）;} else {$（'＃cursor'）。 }}，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;背景：黑色;颜色：＃21f838; padding：5px; overflow：hide;}＃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 = ：//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 =textname =commandvalue =/>  

How can I use this square cursor ( image below ) in the input tags ?

解决方案

Sample

I've changed how it works, and it seems to solve a few issues :)

• Accepts any text a normal input can
• Backspace works
• Theoretically can support pasting text

Usual caveats apply still, most notably the inability to visually see where the caret is.

I'd think long and hard whether this solution is worth implementing, based on its drawbacks and usability issues.

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

这篇关于如何在HTML输入字段中使用此方形游标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！