it-swarm.com.de

Eingabetyp = "Text" vs Eingabetyp = "Suche" in HTML5

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

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

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

120
Vijin Paulraj

Im Moment gibt es keinen großen Deal zwischen ihnen - vielleicht wird es nie einen geben. Es geht jedoch darum, den Browsern die Möglichkeit zu geben, etwas Besonderes daraus zu machen, wenn sie dies möchten.

Nachdenken über <input type="number"> auf Mobiltelefonen, Nummernblöcke aufrufen oder type="email" eine spezielle Version der Tastatur aufrufen, wobei @ und .com und der Rest verfügbar sind.

Auf einem Mobiltelefon kann die Suche ein internes Such-Applet aufrufen, wenn sie dies wünscht.

Auf der anderen Seite hilft es aktuellen Entwicklern mit CSS.

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

In den meisten Browsern funktioniert das überhaupt nicht. Es verhält sich einfach wie eine Texteingabe. Das ist kein Problem. Die Spezifikation erfordert nichts Besonderes. WebKit-Browser behandeln das allerdings ein bisschen anders, hauptsächlich mit dem Styling.

Eine Sucheingabe in WebKit verfügt standardmäßig über einen eingefügten Rand, abgerundete Ecken und eine strikte typografische Kontrolle.

Ebenfalls,

Dies ist nirgendwo dokumentiert, wo ich es kenne, noch ist es in der Spezifikation, aber wenn Sie einen Ergebnisparameter zur Eingabe hinzufügen, bringt WebKit eine kleine Lupe mit einem Dropdown-Pfeil an, der die vorherigen Ergebnisse anzeigt.

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

Referenz

Vor allem bietet es eine semantische Bedeutung für die input type.

Update:

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

28
Jashwant

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

  1. Sie erhalten ein ' X ' - Symbol am Ende des Eingabe-/Suchfelds, um die Texte im Feld zu löschen
  2. Durch Drücken der Taste 'Esc' auf der Tastatur werden auch die Texte gelöscht
16
Harsh Raj

In einigen Browsern werden auch die Attribute "results" und "autosave" unterstützt, wodurch die automatische Funktion "Recent Search" mit dem Lupensymbol bereitgestellt wird.

Mehr Infos

7
Scott Wilson

Seien Sie vorsichtig, wenn Sie davon ausgehen, dass es nichts bewirkt. Wenn Sie mit der Typensuche zu Stileingaben wechseln, verfügen diese über bestimmte Attribute, die nicht geändert werden können. Versuchen Sie, die Grenze zu ändern, und Sie werden es ganz unmöglich finden. Es gibt mehrere andere nicht zugelassene CSS-Attribute, lesen Sie this für alle Details.

Wie auch von Jashwant erwähnt, gibt es das result-Attribut, obwohl es nur dann sehr gut funktioniert, wenn Sie auch das autosave-Attribut einschließen. Das Dropdown-Menü funktioniert jedoch in den meisten Browsern nicht. Verwenden Sie es daher auf eigene Gefahr.

2
sage88

Bonuspunkt: input type="search "Kann das onsearch -Attribut verwenden (obwohl mir aufgefallen ist, dass dies in Microsofts neuem Edge-Browser NICHT funktioniert), wodurch das Schreiben einer benutzerdefinierten onkeypress=if(key=13) { function() } Sache.

1
James Groves

bei Verwendung von input type = "search" zeigt die Tastatur bei der Eingabe von Tastentexten "search" an, was die Benutzerfreundlichkeit verbessern kann. Sie müssen jedoch den Stil anpassen, wenn Sie diesen Typ verwenden.

1
qingyang yu

Es gibt einen Unterschied in der Aktion des Browsers, wenn Sie einige Wörter eingeben und dann ESC in der Eingabe type="search" In Chrome/Safari eingeben, wird das Eingabefeld gelöscht. Im Szenario type="text" werden die Wörter jedoch 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

1
yidea

Es hängt von der Sichtweise des Programmierers ab. Ein Programmierer kann den Zweck der Eingabe leicht anhand des Typs bestimmen. Das CSS-Styling und die Überprüfung der Regeln in den Eingaben durch JavaScript oder JQuery sind einfach.

0
Fil