input type = „tekst” a input type = „search” w HTML5

Jestem nowy w HTML5, ponieważ zacząłem pracować z nowymi polami wejściowymi formularza HTML5. Kiedy pracuję z pól wejściowych formularza, szczególnie <input type="text" />i <input type="search" />IMO nie było żadnej różnicy w tym wszystkich głównych przeglądarki Safari, Chrome, Firefox i Opera. Pole wyszukiwania również zachowuje się jak zwykłe pole tekstowe.

Jaka jest więc różnica między input type="text"i input type="search"w HTML5?

Jaki jest prawdziwy cel <input type="search" />?

W tej chwili nie ma między nimi wielkiej umowy - może nigdy nie będzie. Chodzi jednak o to, aby twórcy przeglądarek mogli zrobić z nią coś specjalnego, jeśli chcą.

Pomyśl o <input type="number">telefonach komórkowych, wywołaniu type="email"klawiatur numerycznych lub wywołaniu specjalnej wersji klawiatury z @ i .com oraz pozostałymi dostępnymi.

Na telefonie komórkowym funkcja wyszukiwania mogłaby wywołać wewnętrzny aplet wyszukiwania, gdyby chcieli.

Z drugiej strony pomaga obecnym deweloperom z css.

input[type=search]:after { content : url("magnifying-glass.gif"); }

W większości przeglądarek nie robi absolutnie nic. Po prostu zachowuje się jak wprowadzanie tekstu. To nie jest problem. Specyfikacja nie wymaga od niego niczego specjalnego. Przeglądarki WebKit traktują to jednak nieco inaczej, przede wszystkim pod względem stylizacji.

Pole wyszukiwania w WebKit ma domyślnie wstawione obramowanie, zaokrąglone rogi i ścisłą kontrolę typograficzną.

Również,

Nie jest to udokumentowane w żadnym znanym mi miejscu ani w specyfikacji, ale jeśli dodasz parametr wyników na wejściu, WebKit zastosuje małe szkło powiększające ze strzałką rozwijaną pokazującą poprzednie wyniki.

<input type=search results=5 name=s>

Odniesienie

Przede wszystkim zapewnia semantyczne znaczenie dla input type.

Aktualizacja:

Chrome 51 usunął obsługę atrybutu wyników:

Wizualnie / funkcjonalnie, 2 różnice, jeśli typ wejścia to „ szukaj ”: -

1. Na końcu pola wprowadzania / wyszukiwania pojawi się symbol „ X ”, aby usunąć tekst w polu
2. Naciśnięcie klawisza „ Esc ” na klawiaturze również usuwa teksty

W niektórych przeglądarkach obsługuje również atrybuty „wyniki” i „autozapis”, które zapewniają funkcję automatycznego „ostatnich wyszukiwań” z ikoną lupy.

Więcej informacji

Właściwie bądź bardzo ostrożny, zakładając, że nic nie robi. Kiedy przejdziesz do wprowadzania stylu z wyszukiwaniem typu, mają one pewne atrybuty, których nie można zmienić. Spróbuj zmienić granicę na jedną, a okaże się to całkiem niemożliwe. Istnieje kilka innych niedozwolonych atrybutów CSS, sprawdź to, aby uzyskać szczegółowe informacje.

Jak wspomniał Jashwant, istnieje atrybut wyniku, chociaż nie działa on zbyt dobrze, chyba że dołączysz również atrybut autozapisu. Lista rozwijana nie będzie działać w większości przeglądarek, więc używaj jej na własne ryzyko.

Istnieje różnica w działaniu przeglądarki, gdy wpiszesz kilka słów, a następnie naciśniesz klawisz ESC na wejściu type="search"w chrome / safari, pole wprowadzania zostanie wyczyszczone. ale w type="text"scenariuszu słowa nie zostaną wyjaśnione. Dlatego ostrożnie wybieraj typ, zwłaszcza gdy używasz go do autouzupełniania lub funkcji związanych z wyszukiwaniem

Punkt bonusowy: input type="search„ma możliwość korzystania z onsearchatrybutu (chociaż zauważyłem, że NIE działa to w nowej przeglądarce Edge firmy Microsofts), co eliminuje potrzebę pisania niestandardowych onkeypress=if(key=13) { function() }rzeczy.

użycie input type = "search" powoduje, że w tekście klawisza enterkey pojawia się słowo "szukaj", co może poprawić komfort użytkowania. jednakże, jeśli używasz tego typu, musisz dostosować styl.

Zależy to od punktu widzenia programisty, programista może łatwo określić przeznaczenie danych wejściowych, patrząc na typ i łatwo jest stylizować CSS, a JavaScript lub JQuery zweryfikować regułę na wejściach.

Ale ma to zły wpływ na element wejściowy, jeśli ustawisz

<input type="search">

A w swoim css ustawiłeś

input {background: url("images/search_bg.gif");}

W ogóle się nie pojawi.