1

我正在尝试使用 CSS 和 jQuery 实现输入光标。

在阅读了这篇教如何做这样的事情的文章后，我有了这个想法

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

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

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

正方形的大小相同，但是，它们的大小在不同的浏览器上有所不同，导致光标无法根据文本移动。

Chrome:

铬合金

Firefox

火狐

Opera

歌剧

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

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

  • 我如何预测将呈现正方形的宽度？
  • 有没有办法在每个浏览器上获取正方形宽度并正确移动光标？
  • 有没有更好的方法来包含光标？

任何帮助、想法或任何东西都会非常感激。我为此快疯了。

更新：退格功能甚至在 FF 中都不起作用。

4

1 回答 1

0

我认为您可以为该输入设置字体大小：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
于 2012-12-23T18:40:31.563 回答