.
Was ist der Unterschied
Was ist der Unterschied ? Es gibt keinen Unterschied in der Aktion von Absenden-Schaltflächen, die mit der ersten oder zweiten Methode erstellt wurden. Der Unterschied besteht darin, dass das Element ist ein Container, daher können Sie darin andere Elemente platzieren, zum Beispiel Bilder oder Symbole.
Sie können Text auf zwei Arten zu Formularfeldern hinzufügen:
Eingabe::-webkit-input-placeholder ( Farbe: #B6C0A5; Schriftart: kursiv; Hintergrund: #E0EFCA; ) Eingabe:-moz-placeholder ( Farbe: #B6C0A5; Schriftart: kursiv; Hintergrund: #E0EFCA; ) input:-ms-input-placeholder ( Farbe: #B6C0A5; Schriftart: kursiv; Hintergrund: #E0EFCA; )
2)
Eingabe (Farbe: weiß;)
Um Symbole anzuzeigen, vergessen Sie nicht, eine Verbindung herzustellen.
2. Suchfeld mit Icon-Button
* (box-sizing: border-box;) form ( position: relative; width: 300px; margin: 0 auto; ) input ( width: 100%; height: 42px; padding-left: 10px; border: 2px solid #7BA7AB ; Randradius: 5px; Umriss: keine; Farbe: #9E9C9C; ) Schaltfläche (Position: absolut; oben: 0; Breite: 42px; Höhe: 42px; Rand: keiner; Hintergrund: #7BA7AB; Randradius: 0 5px 5px 0; Cursor: Zeiger; ) button:before ( Inhalt: „\f002“; Schriftfamilie: FontAwesome; Schriftgröße: 16px; Farbe: #F9F0DA; ) 3. Suchfeld mit einer Schaltfläche darin
* (box-sizing: border-box;) form ( position: relative; width: 300px; margin: 0 auto; ) input, button ( border: none; outline: none; border-radius: 3px; ) input ( width: 100 %; Höhe: 42 Pixel; Hintergrund: #F9F0DA; Polsterung links: 15 Pixel; Schriftgröße: 20 Pixel : deutlich; ) 4. Suchfeld im flachen Stil
* (box-sizing: border-box;) Formular (Position: relativ; Breite: 300 Pixel; Rand: 0 automatisch; Hintergrund: #A3D0C3;) Eingabe, Schaltfläche (Rahmen: keine; Umriss: keine; Hintergrund: transparent;) Eingabe ( Breite: 100 %; Höhe: 42 Pixel; Polsterung links: 15 Pixel; ) Schaltfläche ( Höhe: 42 Pixel; Breite: 42 Pixel; Position: absolut; oben: 0; rechts: 0; Cursor: Zeiger; ) Schaltfläche: vor ( Inhalt: "\f002"; Schriftfamilie: FontAwesome; 5. Suchfeld mit dickem unteren Rand
* (Boxgröße: border-box;) Formular (Position: relativ; Breite: 300 Pixel; Rand: 0 automatisch; Hintergrund: #F9F0DA; Rand unten: 4 Pixel fest #be290e;) Eingabe, Schaltfläche (Rahmen: keine; Umriss : keine; Hintergrund: transparent; ) Eingabe ( Breite: 100 %; Höhe: 42 Pixel; Polsterung links: 15 Pixel; ) Schaltfläche ( Höhe: 42 Pixel; Breite: 42 Pixel; Position: absolut; oben: 0; rechts: 0; Cursor: Zeiger;) button:before (Inhalt: „\f178“; Schriftfamilie: FontAwesome; Schriftgröße: 20px; Farbe: #be290e;) 6. Suchfeld mit wechselnder Rahmenfarbe
* (Boxgröße: border-box;) Formular (Position: relativ; Breite: 300 Pixel; Rand: 0 automatisch;) Eingabe, Schaltfläche (Umriss: keine; Hintergrund: transparent;) Eingabe ( Breite: 100 %; Höhe: 42 Pixel ; padding-left: 15px; border: 3px solid #F9F0DA; ) button ( border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; Cursor: pointer; ) button: before ( Inhalt: „\f002“; Schriftfamilie: FontAwesome; Schriftgröße: 16px; 7. Ausziehbares Suchfeld
Das Suchfeld erscheint, wenn Sie auf die Schaltfläche mit dem Symbol klicken.
* (box-sizing: border-box;) form ( position: relative; width: 300px; margin: 0 auto; height: 42px; ) input ( height: 42px; width: 0; padding: 0 42px 0 15px; border: none; border-bottom: 2px solid transparent; solide #F9F0DA; ) Schaltfläche (Hintergrund: #683B4D; Rand: keine; Höhe: 42px; Breite: 42px; Position: absolut; oben: 0; rechts: 0; Cursor: Zeiger; ) Schaltfläche: vor ( Inhalt: "\f002 "; Schriftfamilie: FontAwesome; Schriftgröße: 16px; Farbe: #F9F0DA; )8. Suchfeld erweitern
* (box-sizing: border-box;) form ( width: auto; float: right; margin-right: 30px; ) input ( width: 250px; height: 42px; padding-left: 15px; border-radius: 42px; Rand: 2px fest #324b4e; Position: relativer Übergang: .3s linear; Rand: keiner; rechts; Dieser Hinweis ist eine Fortsetzung des vorherigen Artikels (Übersetzung) „Suche nach einem Blog mit der Google AJAX Search API und jQuery“.
Anfangs Demo :
Blog-Suche↓ Als „Grundlage“ für die Popup-Suche habe ich ein jQuery-Modal-Window-Plugin namens „ Aufdecken . Es ist leicht, ohne unnötige Elemente und sehr einfach anzuschließen. Installations-Enthüllung .offenbaren.css .
Der nächste Schritt besteht darin, das Plugin zu initialisieren. Tuning " Skript (Leg es dort hin): Popup-Inhalt (Wir haben dies in den Text des Beitrags eingefügt):
Blog-Suche↓
Hier fügen wir alle Suchcodes aus dem Artikel „Suche nach einem Blog mit der Google AJAX Search API und jQuery“ ein.
Laut meinem Kommentar in diesem Code: Kopieren Sie die gesamte Google-Suche und fügen Sie sie dort ein worüber wir jetzt reden. In der CSS-Stilvorlage müssen Sie die Fläche des weißen Quadrats vergrößern.
Und der letzte Schritt bist du selbst Link zum modalen Fenster , das entweder Text oder Grafik sein kann. Linkcode in Form eines Bildes (auch im Textkörper des Beitrags): Aufdecken , einem modalen Fenster-Plugin, gibt es zwei Arten von Animationen: fade und fadeAndPop , einstellbare Geschwindigkeit der Effektausführung: Animationsgeschwindigkeit: 300 , und die Möglichkeit, das gesamte Fenster durch Klicken auf den abgedunkelten Hintergrund zu schließen: closeonbackgroundclick: wahr .
Diese Einstellungen werden in das „Konfiguration“-Skript geschrieben (siehe oben):
$("#myModal").reveal(( Animation: "fadeAndPop", //fade, fadeAndPop, none Animationsgeschwindigkeit: 300, //wie schnell Animationen sind closeonbackgroundclick: true, //wenn Sie auf den Hintergrund klicken, wird das Modal geschlossen? dismissmodalclass: „close-reveal-modal“ //die Klasse einer Schaltfläche oder eines Elements, die ein offenes Modal schließt ));
Oder diese Optionen können über verbunden werden Verknüpfung zum modalen Fenster (siehe oben) Suche in einem separaten Fenster - reines Experimentieren und erfordert eine sorgfältigere Anpassung.
Ein Tutorial zum Erstellen einer mobilfreundlichen und reaktionsfähigen Suchleiste
Heute möchten wir Ihnen zeigen, wie Sie einen Effekt wie im Bild oben erzeugen. Ziel ist es, die Kompatibilität mit Mobilgeräten und älteren Browsern (IE 8+) zu verbessern. Auch wenn es auf den ersten Blick wie eine einfache Sache erscheint, muss ich sagen, dass wir ein paar Tricks anwenden mussten, um den gesamten Mechanismus wie vorgesehen zum Laufen zu bringen.
Im Allgemeinen möchten wir mit der Suchleiste Folgendes erreichen:
Zunächst wird nur die Schaltfläche mit dem Suchsymbol angezeigt
Wenn Sie auf das Symbol klicken, muss die Suchleiste zur Seite verschoben werden
Die Komponente muss flexibel sein, in dem Sinne, dass sie in einer reaktionsfähigen Schnittstelle verwendet werden kann
Wenn der Benutzer etwas in eine Zeile eingibt, muss das Formular durch Drücken der Eingabetaste oder Klicken auf die Suchschaltfläche gesendet werden können
Wenn das Feld geöffnet ist und keine Daten eingegeben wurden und wir auf die Suchschaltfläche klicken, sollte sich das Eingabefeld schließen
Außerdem muss das Eingabefeld geschlossen werden, wenn wir irgendwo außerhalb des Suchfelds klicken, egal ob es leer ist oder nicht
Wenn JavaScript deaktiviert ist, sollte das Suchfeld erweitert angezeigt werden
Für eine bessere Interaktion mit Touch-Geräten müssen Sie außerdem Unterstützung für Touch-Ereignisse hinzufügen
Nachdem wir uns nun über alles entschieden haben, was wir tun müssen, beginnen wir mit dem Markup.
Markierung
Im Markup verwenden wir den Hauptcontainer, ein Formular, ein Textfeld und einen Senden-Button sowie ein Span-Element für das Symbol:
Eigentlich können Sie ein Pseudoelement für ein Symbol verwenden, aber da es nicht für austauschbare Elemente, also Formularelemente, konzipiert ist, verwenden wir einfach das Element Spanne .
Da nun alle Elemente vorhanden sind, können wir sie stylen.
CSS
Basierend auf unseren Anforderungen stellen wir zunächst sicher, dass wir eine Schaltfläche mit einem sichtbaren Suchsymbol haben. Alles andere sollte verborgen bleiben. Aber denken wir noch einen Schritt weiter und stellen uns vor, was passiert, wenn wir die Suchleiste (mit dem Hauptcontainer) erweitern. Wie machen wir das? Nutzung der Immobilie Überlauf versteckt und durch Ändern der Breite des SB-Suchcontainers sollte das Eingabefeld angezeigt werden.
Lassen Sie uns also zunächst den SB-Search-Container gestalten. Lassen wir es rechts schweben und geben wir es Überlauf versteckt . Die ursprüngliche Breite beträgt 60 Pixel. Da wir jedoch auf 100 % Breite animieren möchten, führt dies zu Problemen in mobilen Browsern (iOS). Sie mögen keine Übergänge von der Pixelbreite zur prozentualen Breite. In diesem Fall werden sie den Übergang einfach nicht schaffen. Setzen wir stattdessen die Mindestbreite auf 60 Pixel und die Breite auf 0 %.
Wir werden auch einen Übergang für die Breite mit der Eigenschaft -webkit-backface-visibility:hidden hinzufügen, der unerwünschte „Schwänze“ in mobilen Browsern (iOS) entfernt:
Sb-search ( position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: versteckt; -webkit-transition: width 0.3s; -moz-transition : Breite 0,3 s; Übergang: Breite 0,3 s; -webkit-backface-visibility: versteckt)
Alles außerhalb dieses Rechtecks wird nicht angezeigt.
Nun positionieren wir das Eingabefeld. Wir verwenden eine prozentuale Breite, sodass sich das Eingabefeld beim Erweitern des übergeordneten Elements mit erweitert. Durch Einstellen der richtigen Höhe, Schriftgröße und Ränder wird sichergestellt, dass der Text zentriert ist (line-height funktioniert in IE8 nicht wie erwartet, daher verwenden wir stattdessen Ränder). Eine absolute Positionierung des Eingabefelds ist nicht notwendig, löst aber das lästige Problem, dass es manchmal beim Schließen des Suchfelds für kurze Zeit rechts neben der Schaltfläche erscheint.
Sb-Sucheingabe ( Position: absolut; oben: 0; rechts: 0; Rand: keine; Umriss: keine; Hintergrund: #fff; Breite: 100 %; Höhe: 60 Pixel; Rand: 0; Z-Index: 10; padding: 20px 65px 20px 20px; Schriftfamilie: inherit; Schriftgröße: 20px; ) input.sb-search-input ( -webkit-appearance: none; -webkit-border-radius: 0px; )
Darüber hinaus entfernen wir Standard-Browser-Eingabefeldstile für die WebKit-Engine.
Legen wir die Textfarben mithilfe browserspezifischer Eigenschaften fest:
Sb-search-input::-webkit-input-placeholder ( Farbe: #efb480; ) .sb-search-input:-moz-placeholder ( Farbe: #efb480; ) .sb-search-input::-moz-placeholder (Farbe: #efb480;) .sb-search-input:-ms-input-placeholder (Farbe: #efb480;)
Nun kümmern wir uns um das Suchsymbol auf der Schaltfläche zum Absenden des Formulars. Wir möchten, dass sie an der gleichen Stelle liegen, eine unter der anderen, also positionieren wir sie relativ zur rechten Ecke und geben ihnen die gleichen Abmessungen. Da sie übereinander liegen sollten, positionieren wir sie unbedingt:
Sb-icon-search, .sb-search-submit ( width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 60px ; Textausrichtung: Mitte;
In der Ausgangsposition möchten wir, dass das Suchsymbol anklickbar ist, und wenn wir das Suchfeld erweitern, möchten wir, dass die Schaltfläche zum Senden des Formulars anklickbar ist. Daher setzen wir zunächst die Absenden-Schaltfläche des Formulars auf z-index=-1 und machen es transparent, damit wir es immer sehen können Spanne mit Suchsymbol:
Sb-search-submit ( Hintergrund: #fff; /* für IE */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0 ); /* IE 5-7 */ Deckkraft: 0; Rand: keine;
Warum machen Sie ihren Hintergrund nicht einfach transparent? Ja, weil es im IE nicht funktioniert, da das Element nicht anklickbar ist. Stattdessen verwenden wir einen einfarbigen Hintergrund und setzen die Deckkraft des Elements auf 0.
Das Suchsymbol wird zunächst einen hohen Z-Index haben, da es über allem erscheinen soll. Verwendung eines Pseudoelements :Vor So fügen Sie ein Suchsymbol hinzu:
Sb-icon-search ( Farbe: #fff; Hintergrund: #e67e22; Z-Index: 90; Schriftgröße: 22px; Schriftfamilie: „icomoon“; sprechen: keine; Schriftstil: normal; Schriftstärke: normal; Schriftartenvariante: normal; -webkit-font-smoothing: antialiased;
Vergessen Sie nicht, die Symbolschriftart ganz am Anfang unseres CSS einzufügen:
@font-face ( Schriftfamilie: "icomoon"; src:url("../fonts/icomoon/icomoon.eot"); src:url("../fonts/icomoon/icomoon.eot?#iefix" ) format("embedded-opentype"), url("../fonts/icomoon/icomoon.woff") format("woff"), url("../fonts/icomoon/icomoon.ttf") format(" truetype"), url("../fonts/icomoon/icomoon.svg#icomoon") format("svg"); Schriftstärke: normal; Schriftstil: normal; )
Mit den gerade definierten Stilen können wir einfach die Breite des sb-search-Containers auf 100 % ändern, indem wir die Klasse sb-search-open zuweisen. Ohne JavaScript ist das Suchfeld standardmäßig geöffnet:
Sb-search.sb-search-open, .no-js .sb-search ( Breite: 100 %; )
Ändern wir die Farbe des Suchsymbols und platzieren es hinter der Schaltfläche zum Senden des Formulars, wobei wir den Z-Index auf einen niedrigeren Wert setzen:
Sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search ( Hintergrund: #da6d0d; Farbe: #fff; Z-Index: 11; )
Zum Schluss geben wir der Schaltfläche „Senden“ des Formulars einen höheren Z-Index, damit wir darauf klicken können:
Sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit ( z-index: 90; )
Nachdem alle Stile beschrieben sind, beginnen wir mit JavaScript.
JavaScript
Beginnen wir mit dem Wechsel der sb-search-open-Klasse. Wir fügen die Klasse hinzu, wenn auf den Hauptcontainer (sb-search) geklickt wird, und entfernen sie, wenn auf die Schaltfläche „Formular senden“ geklickt wird, aber nur, wenn nichts in das Feld geschrieben wird. Ansonsten senden wir das Formular einfach ab. Um die Klasse nicht zu löschen, wenn Sie auf das Eingabefeld klicken (da unsere Trigger für den gesamten Container gesetzt sind), müssen wir verhindern, dass das Klickereignis auf diesem Element sprudelt. Dies bedeutet, dass beim Klicken auf das Eingabefeld das Klickereignis für die übergeordneten Elemente nicht ausgelöst wird.
;(function(window) ( function UISearch(el, options) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch .prototype = ( _initEvents: function() ( var self = this, initSearchFn = function(ev) ( if(!classie.has(self.el, "sb-search-open")) ( // open ev.preventDefault( ); self.open(); ) else if(classie.has(self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value)) ( // close self.close(); ) ) this.el.addEventListener("click", initSearchFn); this.inputEl.addEventListener("click", function(ev) ( ev.stopPropagation(); )), open: function () ( classie.add(this.el, "sb-search-open"); ), close: function() ( classie.remove(this.el, "sb-search-open"); ) ) // zum hinzufügen globaler Namespace window.UISearch = UISearch ))(window);
Als nächstes müssen wir Ereignisse hinzufügen, um die Klasse „sb-search-open“ zu entfernen, wenn wir irgendwo außerhalb unserer Suchleiste klicken. Damit dies funktioniert, müssen Sie sich auch um das Popup von Ereignissen kümmern, wenn Sie auf den Hauptcontainer klicken.
;(function(window) ( function UISearch(el, options) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch .prototype = ( _initEvents: function() ( var self = this, initSearchFn = function(ev) ( ev.stopPropagation(); if(!classie.has(self.el, "sb-search-open")) ( / / open ev.preventDefault(); self.open(); ) else if(classie.has(self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value )) ( // close self.close(); ) ) this.el.addEventListener("click", initSearchFn("click", function(ev) ( ev.stopPropagation(); )) ; ), open: function() ( var self = this; classie.add(this.el, "sb-search-open"); // Suchfeld schließen, wenn irgendwo außerhalb des Containers geklickt wurde var bodyFn = function ( ev) ( self.close(); this.removeEventListener("click", bodyFn); ); document.addEventListener("click", bodyFn); close: function() ( classie.remove(this.el, " sb -search-open"); ) ) // zum globalen Namespace hinzufügen window.UISearch = UISearch; ))(Fenster);
Eine weitere Sache, auf die geachtet werden muss, ist das Entfernen zusätzlicher Leerzeichen am Anfang und Ende der Zeile.
Wenn Sie auf das Suchsymbol klicken, müssen Sie außerdem sicherstellen, dass der Fokus auf das Eingabefeld verschoben wird. Da dies auf mobilen Geräten (iOS) zu ruckelndem Rendering führt, da sich gleichzeitig auch die Tastatur öffnet, müssen wir für solche Fälle irgendwie verhindern, dass sich die Tastatur öffnet. Wenn wir das Suchfeld schließen, müssen wir den Fokus davon entfernen. Dies behebt Probleme, bei denen einige Geräte nach dem Schließen des Suchfelds immer noch einen blinkenden Cursor anzeigen.
;(function(window) ( // http://stackoverflow.com/a/11381730/989439 function mobilecheck() ( var check = false; (function(a)(if(/(android|ipad|playbook|silk| bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront |opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser |link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50i|770s|802s|a wa|abac|ac (er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w |bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng )|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic| k0)|esl8|ez(0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od )|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c (\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/) |ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-| kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-)|libw|lynx|m1\-w|m3ga|m50\/ |ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi| de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10|n20|n30(0|2)|n50(0|2|5)|n7(0(0|1) |10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan (a|d|t)|pdxg|pg(13|\-(|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio |pt\-g|qa\-a|qc(07|12|21|32|60|\-|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\ /|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47| mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft| ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\ -|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\ .b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5|\-v)|vm40|voda|vulc|vx(52|53|60|61| 70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\- /i.test(a.substr(0,4)))check = true))(navigator.userAgent||navigator.vendor||window.opera); Rückgabescheck; ) // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() ( return this.replace(/^\s+|\ s+$/g, ""); function UISearch(el, Optionen) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch.prototype = ( _initEvents: function () ( var self = this, initSearchFn = function(ev) ( ev.stopPropagation(); // zusätzliches Leerzeichen entfernen self.inputEl.value = self.inputEl.value.trim(); if(!classie.has( self .el, "sb-search-open")) ( // open ev.preventDefault(); self.open(); ) else if(classie.has(self.el, "sb-search-open") && / ^\s*$/.test(self.inputEl.value)) ( // close self.close(); ) ) this.el.addEventListener("click", initSearchFn); this.inputEl.addEventListener("click" ", function(ev) ( ev.stopPropagation(); )); ), open: function() ( var self = this; classie.add(this.el, "sb-search-open"); // Fokus verschieben auf dem Eingabefeld if(!mobilecheck()) ( this.inputEl.focus(); ) // Suchfeld schließen, wenn irgendwo außerhalb des Containers geklickt wurde var bodyFn = function(ev) ( self.close(); this. removeEventListener("click", bodyFn); ); document.addEventListener("click", bodyFn); ), close: function() ( this.inputEl.blur(); classie.remove(this.el, "sb-search-open"); ) ) // zum globalen Namespace-Fenster hinzufügen. UISearch = UISearch; ))(Fenster);
Damit das alles auf mobilen Geräten reibungslos funktioniert, müssen Sie die entsprechenden Touch-Events einstellen. Beim Hinzufügen Standard verhindern in eine Funktion umwandeln initSearchFn verhindert das gleichzeitige Auslösen von Bildschirmtipp- und Klickereignissen für Mobilgeräte.
;(function(window) ( // http://stackoverflow.com/a/11381730/989439 function mobilecheck() ( var check = false; (function(a)(if(/(android|ipad|playbook|silk| bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront |opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser |link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50i|770s|802s|a wa|abac|ac (er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w |bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng )|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic| k0)|esl8|ez(0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od )|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c (\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/) |ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-| kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-)|libw|lynx|m1\-w|m3ga|m50\/ |ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi| de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10|n20|n30(0|2)|n50(0|2|5)|n7(0(0|1) |10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan (a|d|t)|pdxg|pg(13|\-(|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio |pt\-g|qa\-a|qc(07|12|21|32|60|\-|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\ /|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47| mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft| ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\ -|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\ .b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5|\-v)|vm40|voda|vulc|vx(52|53|60|61| 70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\- /i.test(a.substr(0,4)))check = true))(navigator.userAgent||navigator.vendor||window.opera); Rückgabescheck; ) // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() ( return this.replace(/^\s+|\ s+$/g, ""); function UISearch(el, Optionen) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch.prototype = ( _initEvents: function () ( var self = this, initSearchFn = function(ev) ( ev.stopPropagation(); // zusätzliches Leerzeichen entfernen self.inputEl.value = self.inputEl.value.trim(); if(!classie.has( self .el, "sb-search-open")) ( // open ev.preventDefault(); self.open(); ) else if(classie.has(self.el, "sb-search-open") && / ^\s*$/.test(self.inputEl.value)) ( // close ev.preventDefault(); self.close(); ) ) this.el.addEventListener("click", initSearchFn); el.addEventListener ("touchstart", initSearchFn); this.inputEl.addEventListener("click", function(ev) ( ev.stopPropagation(); )); this.inputEl.addEventListener("touchstart", function(ev) ( ev.stopPropagation (); )), open: function() ( var self = this; classie.add(this.el, "sb-search-open"); // Fokus auf das Eingabefeld verschieben if(!mobilecheck ()) ( this.inputEl.focus(); ) // Suchfeld schließen, wenn irgendwo außerhalb des Containers geklickt wurde var bodyFn = function(ev) ( self.close(); this.removeEventListener("click", bodyFn); this.removeEventListener("touchstart", bodyFn ); document.addEventListener("click", bodyFn); document.addEventListener("touchstart", bodyFn); ), close: function() ( this.inputEl.blur(); classie.remove(this.el, "sb-search-open"); ) ) // zum globalen Namespace-Fenster hinzufügen. UISearch = UISearch; ))(Fenster);
Und schließlich für Browser, die dies nicht unterstützen addEventListener Und entfernenEventListener , wir werden EventListener von Jonathan Neal verwenden.
//EventListener | @jon_neal | //github.com/jonathantneal/EventListener !window.addEventListener && window.Element && (function () ( function addToPrototype(name, method) ( Window.prototype = HTMLDocument.prototype = Element.prototype = method; ) var Registry = ; addToPrototype("addEventListener", Funktion (Typ, Listener) ( var target = this; Registry.unshift(( __listener: function (event) ( event.currentTarget = target; event.pageX = event.clientX + document.documentElement.scrollLeft; event.pageY = event.clientY + document.documentElement.scrollTop; event.preventDefault = function() (event.latedTarget = event.fromElement || null; event.stopPropagation = function() (event. cancelBubble = true ); event. relatedTarget = event.fromElement ||. null; event.srcElement ||. target: target, type: type )); ; addToPrototype("removeEventListener", function (type, listener) ( for (var index = 0, length = Registry.length; Index< length; ++index) {
if (registry.target == this && registry.type == type && registry.listener == listener) {
return this.detachEvent("on" + type, registry.splice(index, 1).__listener);
}
}
});
addToPrototype("dispatchEvent", function (eventObject) {
try {
return this.fireEvent("on" + eventObject.type, eventObject);
} catch (error) {
for (var index = 0, length = registry.length; index < length; ++index) {
if (registry.target == this && registry.type == eventObject.type) {
registry.call(this, eventObject);
}
}
}
});
})();
Und hier ist es! Ich hoffe, Ihnen hat dieser Leitfaden gefallen und Sie haben etwas Nützliches daraus gelernt!
Parameterschlüsselname. Für das Suchfeld wird am häufigsten „q“ oder „text“ verwendet. Parameterschlüsselwert. Meistens wird nicht danach gefragt. Der Benutzer kann ihn in seinen eigenen Text ändern, wenn die Attribute „readonly“ und „disabled“ nicht angegeben sind. Durch den Benutzer geändert, blockierter Zugriff, Änderung durch den Benutzer und Übertragung von Daten des aktuellen Parameters. Das Feld darf nicht leer sein. Eingabevorlage wie in regulären Ausdrücken JS, woraufhin zum Absenden des Formulars die zum Absenden des Formulars erforderliche Mindestanzahl von Zeichen erforderlich ist die maximale Anzahl von Zeichen, die der Benutzer eingeben kann, Feldlänge in Symbolen, ein Platzhalter-Tooltip, ein Popup-Tooltip beim Bewegen des Mauszeigers, automatische Vervollständigung. Moderne Browser zeigen zuvor eingegebene Suchanfragen zur aktuellen Domain an. Sie können es deaktivieren oder spezifischer gestalten. Liste der empfohlenen Abfragen. Rechtschreib- und Grammatikprüfung des Feldfokus (d. h. der Zeitraum zwischen dem Klicken auf ein Element und dem Klicken außerhalb des Elements), der beim Laden des Dokuments ermittelt wird
Entfernen Sie das Kreuz „Löschen“ aus dem Suchfeld, wodurch zuvor eingegebener Text gelöscht wird
So funktioniert das Suchformular auf der Website
Der einfachste HTML-Code
Wenn Sie „Frage“ in das Feld eingeben und auf die Schaltfläche „Suchen“ klicken, ändert sich die Seitenadresse von „http://site/2011/06/forma-poiska-po-saitu..html“. ?text=Frage ", wie dies geschieht, wenn Sie auf einen Link klicken. Wenn die Seite geladen wird, prüft das Skript, ob die angegebenen Parameter in der URL vorhanden sind, und generiert und zeigt Suchergebnisse für die Website an, wenn sie erkannt werden.
Um jedoch die Geschwindigkeit des Ladens von Dokumenten zu erhöhen, wird das Skript, das die Anforderung verarbeitet, normalerweise nur auf einer Seite der Site platziert, zu der ein Übergang erfolgt, wenn ihre Adresse im Aktionsattribut angegeben ist: „ http://site/search/ ?text=Frage".
Damit das Skript funktioniert, sind möglicherweise zusätzliche Parameter erforderlich, die in angegeben sind Such-ID=808327 &text=Frage".
Öffnen Sie das Ergebnis des Formulars in einem neuen Tab mit dem Zielattribut
Wo kann ich ein Site-Search-Skript erhalten?
Sie können verwenden
angeboten von speziellen Diensten von Yandex und Google, eingebaut in das verwendete CMS (sofern verfügbar), zum Beispiel auf Blogger unter „https:// site.ru /search?q=question“, wobei „site.ru“ durch Ihre Blog-Adresse ersetzt wird, unabhängig entwickelt, zum Beispiel in PHP.
Am einfachsten ist es, die Anfrage an Google weiterzuleiten:
Text auf der Schaltfläche: „Suchen“, „Suchen“, „Suchen“
Von den motivierenden Wörtern hat „Find“ die perfekte Form und impliziert, dass das Suchergebnis definitiv positiv sein wird.
