6

/のtextareas / padding-leftinputsにそれぞれ追加および削除する簡単なスクリプトがあります。これは、フィールドの下にあるテキストをブロックすることなく、フィールドの左側にある小さな絶対位置のボタン用のスペースを確保するためです。[編集]ブロックの合計サイズを一定に保つために、要素の幅も同時に変更します。focusblur

MSIE 9を除いて、ほとんどすべてのブラウザでこれは正常に機能します。[編集]ボックスは同じサイズのままで、両方のプロパティのCSSが適切に更新されたことを示しますが、input/textareaのテキストはパディングが変更されていないかのように動作します。 。focus/イベントのコールバックはblur、DOMオブジェクトのスタイルプロパティを適切に起動および更新していることを知っています。これは、プロパティの現在の値をフェッチすると、常に期待される値が得られるためです。

すなわち

var field = $(field);
field.css({
  'padding-left' : 0
});
console.log(field.css('padding-left')); // '0px'

それでも、input/textareaフィールドのテキストには以前のパディングが表示されます。基本的に、幅とパディングを同時に変更しようとすると、これらのフィールドが表示されるコンテキストで、MSIE9のレンダリングエンジンを混乱させるものがあるようです。

フィールドに入力を開始するとすぐに、MSIEは問題を修正し、input/textareaのテキストを現在のパディングに従わせます。これを実現して、コールバックとコールバックfield.val(field.val());の最後にを追加してみました。これにより、1つの問題が解決され、キャレット位置を入力/テキスト領域の先頭にリセットするという形で別の問題が発生します。blurfocus

DOMに要素を削除して再挿入するというドラマを経ることなく、ブラウザに特定の要素を強制的に再描画させる方法はありますか？

[編集]

これは、コードの省略形（実際のコンテキストで追加機能を備えている）を示すフィドルです。

http://jsfiddle.net/KYrXM/

パディングが更新されていることがわかりますが、入力を開始するまで目に見える変更は行われません。

アプリケーションでボックスサイズを一定に保つために変更する必要がありますが、widthプロパティも変更しないことを選択すると、この問題は解消されます。

4

2 に答える 2

1

これがなぜなのかわかりません。''間違いなくIE9のバグですが、代わりにパディングをの代わりに空の文字列に設定すると'0px'、機能します。

field.css({
  'padding-left' : '' // <- Use '' instead of 0.
});

これが実用的なフィドルです：http：//jsfiddle.net/KYrXM/4/

1または、の代わりにに設定した場合にも機能し、0おそらく余分なピクセルの周りをプログラムすることができます。

于 2012-09-12T03:32:55.123 に答える
0

これにより、再描画が強制され、問題が修正されます（ただし、これは醜いハックです）。

$('#your-input-element').replaceWith($('#your-input-element').clone());
于 2013-04-12T10:14:46.837 に答える