Dlaczego Chrome ignoruje atrybut "rozmiaru" wprowadzania tekstu?

Question

Poniższy atrybut wielkości nie ma żadnego wpływu. Czemu?

<input type="text" size="80" placeholder="blablabla bla lba bla bla bla blabla bla bla bla lba"> 

Domyślnie jest to 60 znaków i nic nie mogę zrobić, aby to zmienić.

Answer 1

Prawdopodobnie masz wpływ na stylizację. Bez żadnych reguł stylu, to jest works just fine. Ale gdy zastosujesz regułę stylu o mniejszym rozmiarze, that takes precedence.

Aby dowiedzieć się, na jakiej zasadzie stylu ma to wpływ, kliknij go prawym przyciskiem myszy i wybierz "Sprawdź element", a następnie spójrz na informacje o stylizacji pokazane po prawej stronie.

Answer 2

Użyj elementu textarea zamiast elementu input:

<textarea cols="80" rows="1" style="overflow: visible" placeholder= 
"blablabla bla lba bla bla bla blabla bla bla bla lba"></textarea> 

To daje bardziej spójne, choć nie całkowicie spójny renderingu. Ustawienie overflow: visible służy do tego, aby ustawić IE jako miejsce na 80 znaków, w przeciwnym razie zmieści się tylko 79, z powodu pionowego paska przewijania.

Dlaczego pojawia się problem z input:

size="80" atrybut określa widoczną szerokość pola do „średniej” szerokości 80 znaków. Nie jest to dokładnie zdefiniowane (co "przeciętne"?), A przeglądarki zaimplementują go nawet nielogicznie: użycie size="80" powoduje nadanie znacznie mniejszej szerokości niż czterokrotność domyślnej szerokości 20 znaków. Tak więc przeglądarka nie jest nawet spójna. Proporcje zależą od czcionki i przeglądarki. (Dzieje się tak w innych przeglądarkach, jak również.)

Jeśli trzeba zachować przy użyciu input:

Można użyć style="width: 80ch", ale nie wszystkie przeglądarki obsługują tej funkcji CSS3, i nie ma gwarancji, że został wdrożony prawidłowo. Jednostka ch jest z definicji przesunięciem szerokości cyfry zero, "0", która jest w większości czcionek taka sama jak szerokość szerokości cyfr w ogóle. (Np. Firefox prawie poprawnie implementuje to. Niemal, ale nie całkiem.)

Można ustawić czcionkę w elementach <input> na czcionkę o stałej szerokości. Nie usuwa to problemu, ale powoduje, że szerokości są bliżej określonych szerokości.

Answer 3

Od wersji Goggle Chrome 26 na systemie Mac OS Lion urządzenie "ch" nie jest obsługiwane. Po sprawdzeniu elementu z wewnętrznym stylem "width: 16ch" styl jest oznaczony jako "Nieprawidłowa wartość właściwości". Inne popularne jednostki (pt, px, em,%) są akceptowane dobrze.

Answer 4

Jeśli zastanawiasz się, dlaczego można wprowadzić 60 znaków, właściwość, która określa, że ​​ile znaków nazywa MaxLength:

MaxLength

Jeśli wartość z atrybut type to text, email, search, password, tel lub url, ten atrybut określa maksymalną liczbę znaków (w kodach Unicode), które użytkownik może wprowadzić; w przypadku innych typów kontroli jest on ignorowany. Może przekraczać wartość atrybutu size. Jeśli nie zostanie określony, użytkownik może wpisać nieograniczoną liczbę znaków.Określenie liczby ujemnej powoduje zachowanie domyślne; to znaczy, że użytkownik może wpisać nieograniczoną liczbę znaków. Ograniczenie jest oceniane tylko wtedy, gdy wartość atrybutu została zmieniona.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Wielkość określa jedynie szerokość w znakach, a nie użytkownicy ilość może wejść.

Answer 5

Miałem ten sam problem i po wypróbowaniu wielu innych rozwiązań, naprawiłem to poprzez dodanie szerokości do pól wejściowych.

input { 
    width:90px; /* Your width may vary */ 
}