0

JavaScript でカスタム入力フィールドを作成しています。(つまり、編集可能なコンテンツ、入力、テキストエリア、または iframe を使用しない)。

テキストエリアフィールドの基本的なオプションをサポートするために必要です。

  • カーソル位置のマウスクリック
  • 選択
  • コピー/貼り付け
    ...

この時点で、基になる入力フィールドでキープレスをリッスンしています。キーが押されると:
1. キーの値がString.fromCharCode(event.keyCode)tmp スパンに渡されます。
2. スパンの幅が測定され、配列に格納されます。
3. キャレットの位置は、サイズの配列を使用して計算されます

これは Chrome では多かれ少なかれ機能しますが、Internet Explorer 9 を使用すると、キャレットの位置がずれているように見えます。

単一のコンテナを持つコンテナの幅が、文字列に挿入されたときの文字の幅と一致しないようです。

これは、ステップ 2 で文字のサイズを計算する方法と関係があると思います。しかし、この問題を解決する方法がわかりません。

誰かがこの問題の経験を持っているか、文献、ブログ API などで正しい方向に私を向けていますか? -それは素晴らしいでしょう！

編集： これは私がこれまでに得たものへのリンクです。

注意: クロムで動作し、前述の欠陥があります: 9 と 10 は Firefox で壊れています :)

4

1 に答える 1

0

フィールド内の各文字の位置を知りたい場合は、前の部分文字列の幅を取得してみてください。

var text = $content.text(),
    positions = [0],
    $ghost = $("<span class='ghost'>").appendTo($content);
for (var i = 1; i < text.length; i++) {
    $ghost.text(text.substring(0, i));
    positions.push($ghost.width());
}
$ghost.remove();

必要な CSS は次のとおりです。

.ghost {
    visibility: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
}

要素のサイズを取得するたびに、ドキュメントのリフローが発生することに注意してください。ただし、絶対配置された要素では問題になりません。

于 2013-07-04T11:00:34.843 に答える