Javascript 如何在 HTML 输入字段中使用这个方形光标？

How to use this square cursor in a HTML input field?

提问by xRobot

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

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

回答by alex

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 hardwhether 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="" />

回答by Sarfraz

AFAIK, that's not possible for html text box, you could style the input itself but you can do nothing about the cursor other than applying the cursor options that are already available :(

AFAIK，这对于 html 文本框是不可能的，您可以设置输入本身的样式，但除了应用已经可用的光标选项之外，您无法对光标做任何事情:(

回答by Lucas Jones

For <input>tags, there's not much you can do. If you didn't mind it being a horrible hack, you could always use JavaScript to resize the text box as needed (set width = *something* * count), and have an <img>with the cursor to the right.

对于<input>标签，您无能为力。如果你不介意这是一个可怕的黑客，你可以随时使用 JavaScript 根据需要调整文本框的大小（设置width = *something* * count），并将<img>光标放在右侧。

I don't think there are any less 'ugh' solutions, bar handling the text input yourself, which is probably overkill.

我不认为有任何更少的“呃”解决方案，禁止自己处理文本输入，这可能是矫枉过正。

回答by Tim Medora

You would have to 1) roll your own textbox and 2) hide the real cursor by continually focusing it elsewhere. Then, capture the key events at the document/body level, and insert that value into your own element. The cursor would then be an animated GIF that was always positioned at far right of your "textbox".

您必须 1) 滚动您自己的文本框和 2) 通过不断将其聚焦到其他地方来隐藏真正的光标。然后，在文档/正文级别捕获关键事件，并将该值插入到您自己的元素中。光标将是一个动画 GIF，它始终位于“文本框”的最右侧。

You will run into issues with #2, and the whole thing is generally inadvisable. HTML 5 opens up some new possibilities, but it's still an awful lot of work for a cursor.

你会遇到 #2 的问题，整个事情通常是不可取的。HTML 5 开辟了一些新的可能性，但对于游标来说仍然需要大量的工作。

回答by oezi

you can't. which means: you coulddo it yourself by using a fixed-with font, use a blinking gif als background which position is set dynamicaly by calculating the with of the already typed text - but there will be the "normal" cursor above your gif, making this solution ugly

你不能。这意味着：您可以通过使用固定字体自行完成，使用闪烁的 gif als 背景，通过计算已输入文本的 with 动态设置位置 - 但您的 gif 上方会有“正常”光标，使这个解决方案丑陋