Mam prosty skrypt, który dodaje i usuwa padding-left do tekstury / wejść na focus / blur. Ma to na celu stworzenie miejsca dla małego, absolutnie pozycjonowanego przycisku po lewej stronie pola, bez blokowania tekstu pod nim. [Edytuj] Jest jednocześnie zmienia szerokość elementu, aby utrzymać całkowitą wielkość bloku spójnego.

W prawie wszystkich przeglądarkach działa dobrze i Dandy, z wyjątkiem MSIE 9. [Edytuj] Chociaż pudełko pozostaje taki sam rozmiar, wskazując, że CSS dla obu właściwości zostało prawidłowo zaktualizowane, tekst w wejściu / Textarea zachowuje się, jakby wyściółka nie zmieniła się . Znam wywołania zwrotne dla zdarzeń {X1}} / {{x1}

To znaczy

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

Jednak tekst w polu wejściowym / textlay nadal pokazuje poprzedni wypełnienie. Zasadniczo coś wydaje się być mylącym silnikiem renderowania Msie9 w kontekście te pola pojawiają się, gdy próbujesz zmienić szerokość i wyściółkę w tym samym czasie.

Gdy tylko zaczniesz wpisywać w polu MSIE, naprawi problem i sprawi, że tekst w wejściu / Textarea przestrzegaj bieżącego wyściółki. Uświadomywanie tego, próbowałem dodać field.val(field.val()); do końca blur i focus} wywołania zwrotne. To rozwiązuje jeden problem i wprowadza inny w postaci resetowania pozycji toretu na początek wejścia / textlai.

Czy jest jakiś sposób, aby wymusić przeglądarkę do ponownego przeceniania danego elementu bez przechodzenia przez dramat usuwania i ponownego wkładania go do domu?

[EDYTOWAĆ]

Oto skrzypce pokazujące skrócony formularz kodu (który ma dodatkową funkcjonalność w swoim rzeczywistym kontekście):

http://jsfiddle.net/kyrxm/

Zobaczysz, że wyściółka jest aktualizowana, ale nie ma widocznej zmiany, dopóki nie wprowadzimy do pisania.

Ten problem odchodzi, jeśli nie zdecydowałem się nie zmienić właściwości szerokości, choć potrzebuję, aby zachować stałą rozmiaru pudełka w mojej aplikacji.

6
cmw 12 wrzesień 2012, 03:29

2 odpowiedzi

Najlepsza odpowiedź

Nie rozumiem, dlaczego to jest; Zdecydowanie błąd w IE9, ale jeśli zamiast tego ustawysz do pustego łańcucha '' zamiast '0px', działa.

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

Oto działający skrzypce: http://jsfiddle.net/kyrxm/4/

Alternatywnie, będzie również działać, jeśli ustawisz go na 1 zamiast 0 i prawdopodobnie mógłbyś zaprogramować wokół dodatkowego piksela.

1
Nathan Wall 12 wrzesień 2012, 03:32

Siły ta zmusza i naprawia problem (ale jest jednak brzydki hack):

$('#your-input-element').replaceWith($('#your-input-element').clone());
0
slm 12 kwiecień 2013, 10:33