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" />?
Odpowiedzi:
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"); }
internal search applet for mobile phone. 2) ability to make better presentation. Jednak z odpowiedzią powinienem zaczekać, bo chcę się upewnić, że nie ma innego celu :)
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>
Przede wszystkim zapewnia semantyczne znaczenie dla input type.
Aktualizacja:
Wizualnie / funkcjonalnie, 2 różnice, jeśli typ wejścia to „ szukaj ”: -
W niektórych przeglądarkach obsługuje również atrybuty „wyniki” i „autozapis”, które zapewniają funkcję automatycznego „ostatnich wyszukiwań” z ikoną lupy.
resultsatrybutu: developers.google.com/web/updates/2016/08/…
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.