input type=”text” vs input type=”search” in HTML5

Lesezeit: 4 Minuten

Benutzer-Avatar
Vijin Paulraj

Ich bin neu bei HTML5, da ich begonnen habe, mit den neuen Formulareingabefeldern von HTML5 zu arbeiten. Besonders wenn ich mit Formulareingabefeldern arbeite <input type="text" /> und <input type="search" /> IMO gab es keinen Unterschied in allen gängigen Browsern, einschließlich Safari, Chrome, Firefox und Opera. Und auch das Suchfeld verhält sich wie ein normales Textfeld.

Also, was ist der Unterschied zwischen input type="text" und input type="search" bei HTML5?

Was ist der eigentliche Zweck von <input type="search" />?

Im Moment gibt es keinen großen Deal zwischen ihnen – vielleicht wird es nie einen geben. Es geht jedoch darum, den Browserherstellern die Möglichkeit zu geben, etwas Besonderes damit zu machen, wenn sie wollen.

Nachdenken über <input type="number"> auf Mobiltelefonen, Aufrufen von Nummernblöcken oder type="email" Aufrufen einer speziellen Version der Tastatur, mit @ und .com und dem Rest verfügbar.

Auf einem Mobiltelefon könnte die Suche ein internes Such-Applet aufrufen, wenn sie wollten.

Auf der anderen Seite hilft es aktuellen Entwicklern mit CSS.

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

  • +1 für zwei gültige Punkte, 1) internal search applet for mobile phone. 2)ability to make better presentation. Ich sollte jedoch warten, bis ich die Antwort akzeptiere, weil ich sicherstellen möchte, dass es keinen anderen Zweck gibt 🙂

    – Vijin Paulraj

    21. Juli 2012 um 8:04 Uhr

  • Im Moment gibt es das nicht. Die Eingaben sind im Moment alle entweder nur Namen (als gäbe es nur teilweise Unterstützung für input[type=color]), oder die Browser haben ihre eigene spezielle Handhabung implementiert (wie type=number oder type=email oder type=range). Es gibt keine andere Option – entweder hat der Browser eine spezielle Handhabung oder nicht. Im Moment funktioniert type=search in den meisten Browsern nicht und wird es wahrscheinlich auch nicht (außer VIELLEICHT, dass es wie ein Suchfeld in iTunes oder einer anderen App aussieht). Derzeit ist es da, damit SIE zusätzliche Funktionalität/Präsentation hinzufügen können, indem Sie wissen, dass es sich um ein Suchfeld handelt.

    – Norguard

    21. Juli 2012 um 15:07 Uhr

  • Ein Unterschied ist das Drücken [Esc] in einer Sucheingabe werden die Ergebnisse gelöscht. Super praktisch, wenn Ihre Benutzer es häufig verwenden.

    – vhs

    28. Februar 2014 um 2:46 Uhr

  • @JoshH das ist super praktisch. Irgendeine Idee, welche Browser (und Versionen) das derzeit betrifft? Ich wäre absolut bereit, die Antwort zu aktualisieren und auf den aktuellen (/zukünftigen) Zustand der Evergreens zu bringen, da die Landschaft jetzt ganz anders ist als vor anderthalb Jahren.

    – Norguard

    28. Februar 2014 um 4:56 Uhr

  • Ich würde nicht empfehlen, Pseudoelemente für ersetzte Elemente zu verwenden: es ist gegen Standardsobwohl es in einigen Fällen funktioniert.

    – Paul Koslowitsch

    2. Februar 2016 um 13:30 Uhr


Optisch/funktional 2 Unterschiede, wenn der Eingabetyp ‘Suche‘:-

  1. Du bekommst ein ‘X‘-Symbol am Ende des Eingabe-/Suchfelds, um Texte im Feld zu löschen
  2. Drücken von ‘Esc‘-Taste auf der Tastatur löscht auch Texte

  • Das passiert sicher nicht überall. In welcher Umgebung wird dies beobachtet?

    – Stéphane Gourichon

    1. Juli 2020 um 9:15 Uhr

  • Das „X“-Symbol war am Rand sichtbar

    – Rahul Ein Waldläufer

    3. März um 9:54

Benutzer-Avatar
Jashwant

Es tut absolut nichts in den meisten Browsern. Es verhält sich einfach wie eine Texteingabe. Das ist kein Problem. Die Spezifikation verlangt nichts Besonderes. WebKit-Browser behandeln es jedoch etwas anders, hauptsächlich mit dem Styling.

Eine Sucheingabe in WebKit hat standardmäßig einen eingelassenen Rahmen, abgerundete Ecken und eine strenge typografische Kontrolle.

Ebenfalls,

Soweit ich weiß, ist dies nirgendwo dokumentiert und auch nicht in der Spezifikation enthalten, aber wenn Sie der Eingabe einen Ergebnisparameter hinzufügen, wendet WebKit eine kleine Lupe mit einem Dropdown-Pfeil an, der vorherige Ergebnisse anzeigt.

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

Bezug

Vor allem gibt es dem eine semantische Bedeutung input type.

Aktualisieren:

Chrome 51 hat die Unterstützung für das Ergebnisattribut entfernt:

Benutzer-Avatar
Scott Wilson

Bei einigen Browsern unterstützt es auch die Attribute “Ergebnisse” und “Automatisches Speichern”, die mit dem Lupensymbol eine automatische Funktion “Letzte Suchen” bereitstellen.

Mehr Info

Benutzer-Avatar
yidea

Es gibt einen Browser-Unterschied in der Aktion, wenn Sie einige Wörter eingeben und dann ESC in der Eingabe drücken type="search" In Chrome/Safari wird das Eingabefeld gelöscht. aber in type="text" Szenario, die Wörter werden nicht gelöscht. Seien Sie also vorsichtig bei der Auswahl des Typs, insbesondere wenn Sie ihn für die automatische Vervollständigung oder für suchbezogene Funktionen verwenden

Benutzer-Avatar
RevanthKrishnaKumar V.

Seien Sie wirklich sehr vorsichtig, wenn Sie davon ausgehen, dass es nichts bewirkt. Wenn Sie mit der Typsuche zu Stileingaben gehen, haben diese bestimmte Attribute, die nicht geändert werden können. Versuchen Sie, die Grenze auf einem zu ändern, und Sie werden es ziemlich unmöglich finden. Es gibt mehrere andere unzulässige CSS-Attribute, sehen Sie sich das an Dies für alle Details.

Wie von Jashwant erwähnt, gibt es auch das Ergebnisattribut, obwohl es nicht sehr gut funktioniert, es sei denn, Sie schließen auch das Autosave-Attribut ein. Das Dropdown-Menü funktioniert jedoch in den meisten Browsern nicht, verwenden Sie es also auf eigene Gefahr.

Benutzer-Avatar
Volker E.

Bonuspunkt: input type="search” hat die Fähigkeit, die zu verwenden onsearch -Attribut (obwohl ich bemerkt habe, dass dies in Microsofts neuem Edge-Browser NICHT funktioniert), wodurch die Notwendigkeit entfällt, ein benutzerdefiniertes zu schreiben onkeypress=if(key=13) { function() } Ding.

1333200cookie-checkinput type=”text” vs input type=”search” in HTML5

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy