1

CSSとjQueryを使用して入力カーソルを実装しようとしています。

このようなことをする方法を教えるこの記事を読んだ後、私はアイデアを得ました

jQueryを使用して2乗パスワードを提供するため（-webkit-text-securityのクロスブラウザーソリューションとして：squared）。

トリックは、非表示の入力と実際に正方形を表示する入力の2つの入力を処理することによって行われます。フォーカスは隠されたフィールドにとどまるので、input cursorそれは失われます。ユーザーはそれがどこに書いているのかを見ることができないので、それはあまり機能的ではありません。

少し考えた後、私はそのアイデアをに実装しましたinput[type="text"]。私が書いたこのjsfiddleをチェックして、私が話していることを確認してください。フィールドに書き込む場合hidden（説明のためにフィドルに隠されていない場合）、パスワード入力により正方形とがレンダリングされますgreen cursor。

正方形のサイズは同じですが、ブラウザによってサイズが異なるため、テキストに従ってカーソルが移動しません。

Chrome:

クロム

Firefox

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 に答える