纯CSS和jQuery输入插入符号/光标

Question

我正在尝试用CSS和jQuery实现一个输入游标。

我在阅读this教授如何做this

之类的文章后得到了这个想法

为了使用jQuery提供平方密码（作为-webkit-text-security: squared的跨浏览器解决方案）。

通过处理两个输入来实现诀窍：隐藏的输入和实际显示方块的输入。 焦点与隐藏字段保持一致，因此input cursor丢失了。 这不是很实用，因为用户无法看到它在哪里写。

经过一番思考后，我在input[type="text"]上实施了这个想法。 检查this jsfiddle我写信看看我在说什么。 如果你在 hidden 字段上写字（好吧，它没有隐藏在小提琴中用于实验目的），密码输入会呈现正方形和 green cursor 。

方块的大小相同，但是它们的大小会因不同的浏览器而异，导致光标不会根据文本移动。

Chrome:

Firefox

Opera

在小提琴中，我使用固定像素值来左右移动光标。

我的小提琴在Chrome中运行良好，但FF和Opera都会呈现不同大小的方块。

• 如何预测渲染方块的宽度？
• 有没有办法在每个浏览器上获取方形宽度并移动 光标正确吗？
• 是否有更好的方法来包含光标？

任何帮助，想法或任何事情都会非常感激。我为此疯狂。

更新：退格功能甚至不能用于FF。

Answer 1

我认为您可以为该输入设置字体大小：http://jsfiddle.net/knfma/22/

input {
  display: block;   
  margin: 5px 0;
  font-size:12px; // set this and see if works cross browser
}                 // tested on chrome and ff