En vanlig användargränssnittstil för Apple och WordPress har varit det växande sökfältet. När en användare klickar för att fokusera, kommer fältet att expandera bredare och kontraheras då användaren avviker. Denna teknik har blivit populär eftersom det sparar utrymme på din sida när sökningen inte används. Men det framhäver också sökfältet när det är är i bruk, som fångar användarens uppmärksamhet och låter dem veta att webbplatsen svarar.
I denna handledning vill jag visa två olika metoder för att bygga ett expanderande sökfält. Den första använder grundläggande CSS3-övergångar som endast stöds i nyare webbläsare. Det här fungerar bra för enkla mönster, men det går inte att kontrollera om användaren har skrivit in strikt via CSS. I det andra fältet använder vi JavaScript för att expandera, och krympa sedan bara om användaren inte har skrivit någon text. Det är en liten, men fascinerande del av användargränssnitt som kan smälta snyggt in i ett webbprojekt.
Live Demo - Hämta källkod
Bygga en enkel blankett
Jag vill inte att demoformulären faktiskt skickar in någonting, så jag använder JavaScript för att stoppa inlämningsevenemanget. Men dokumentets vanliga HTML är fortfarande normalt och ganska enkelt. Du kan ladda ner en kopia av min demo om du vill arbeta på en lokal kopia av handledningen.
Denna kod innehåller alla rubrikkoder vi behöver på HTML-sidan. Jag har tagit med en kopia av jQuery-biblioteket för snabbare skript. Min anpassade JavaScript sparas i en extern fil med namnet jsinput.js. Det innehåller inte något för komplicerat, men det är värt att förstå hur vi genomför de olika effekterna via CSS och JS. Här är de två formulärinmatningsområdena med exakta HTML-koder:
Sökfälten heter #s och # s2 respektive. Jag höll till en liknande namngivningskonvention med formelementen och skickade knappar. Att läsa igenom CSS-dokumentet borde vara mycket enklare eftersom vi har fälten delade med unika ID-namn. Men först kan vi titta på CSS-övergångarna och sedan flytta till det dynamiska JavaScript-fältet.
Expanderar med CSS-övergångar
Min demo CSS-fil innehåller en serie återställningar tillsammans med grundläggande stilar för att skapa layoutstrukturen. Det är inget vanligt om du är bekant med CSS. Men ett block jag tycker är värt att nämna riktar sig faktiskt till platshållarteksten för olika inmatningselement. Dessa väljare stöds inte i alla webbläsare, men vi kan få en majoritet av de nyare motorerna med dessa koder:
Det är mycket trevligare att blanda typisk inmatningstext med resten av din design. CSS-egenskaperna för varje sökfält efterliknar en liknande ton. Jag har en yttre omslagsklass som heter .fieldcontainer som inkapslar formen vid 100% bredd. Det betyder att formuläret aldrig kommer att expandera bortom sidbehållaren, så vi kan använda 100% som max och allt annat kommer att vara relativt.
Övergångsegenskaperna finns längst ner på sidan .searchfield klass. De vanliga CSS3-egenskaps- och leverantörs prefixen bör täcka en majoritet av webbläsare. Men om du behöver stöd för bakåtkompatibilitet, då använder du en strikt JavaScript-metod, vilket ger större resultat. Även om denna kod är riktigt mycket renare och lättare att organisera.
En sista bit för sökinmatningsområdet fixar placering för vår sökikon. Detta måste placeras i slutet av inmatningsfältet, vilket även innehåller lite vaddering på höger sida. På så sätt kan användaren aldrig skriva in text som skriver över sökknappsikonen. Den ursprungliga källan till den här grafiken är från Icon Finder designad av Brightmix. Den platta ikonuppsättningen är perfekt för en sådan grundläggande sökfältinmatning.
Det största problemet med CSS-bara animering hanterar dynamiska användarval. När en besökare skriver in text i det expanderade fältet kan de komma in, eller de kan gå till klick på förstoringsglaset. Om de klickar för att söka på detta kommer borttagning av fokus från inmatningen och det kommer att krympa tillbaka till 45%, vilket också klarar av klickhändelsen. Du kan välja att redigera övergångsegenskaperna och fixa dem på :fokus stat. Men då kommer det inte att finnas någon animering när du ändrar storlek ner, så effekten är ännu värre.
Hantering av dynamisk ingång via jQuery
I mitt prov demo är det andra inmatningsfältet det enda som riktas av jQuery. På toppen av jsinput.js Jag har skapat två variabler som väljer det andra inmatningsfältet och sökknappen. Det är möjligt att ändra dessa positioner om du hellre vill rikta in det första fältet. Men då kan det också vara värt att ta bort CSS3-övergångarna och bara använda dem som en återgångsmetod när JS är inaktiverad i webbläsaren.
Jag har brutit upp filen i två stora bitar av kod. Den här första halvan innehåller de inledande variablerna tillsammans med fokushanteraren. När användaren fokuserar på det andra inmatningsfältet behöver vi bredda ut 100%. Vi måste också flytta sökikonen från dess standardposition hela vägen till höger. De två metoderna jQuery.animate () ska springa exakt samtidigt, vilket ger en mycket liknande animeringseffekt som med CSS3-övergångar.
Då har den sista chunk ytterligare två händelser för bindning. Det första händer efter att användaren blur bort det andra inmatningsfältet. Skriptet testar mot search2.val () och avgöra om användaren har angett några data. Om fältet är tom så animerar vi tillbaka till 45% bredd och ikonen flyttas också. Annars har användaren angett några sökord och vi lämnar den med full 100% bredd.
Det andra små blocket av koder kommer att utlösas när du försöker skicka in data till någon av formulären. Det kommer automatiskt fånga in inlämningen och stoppa det händer med event.preventDefault (). Sammantaget bör det inte vara ett komplext skript, men utvecklare som är obekanta med jQuery kan behöva undersöka ett par funktioner. Koderna är exceptionellt små och ska fungera i alla JS-aktiverade webbläsare.
Live Demo - Hämta källkod
Slutsats
Det här gränssnittet kräver inte mycket planering eller extra kod i din design. Och även om du har samma designstil för dina inmatningsfält på webbplatsen, kan den här tekniken göras med hjälp av några CSS3-övergångar tillsammans med en yttre behållare.
Det skulle också vara möjligt att inkludera detta på valfritt antal liknande former som kontaktfält eller profilinställningar. Ladda ner en kopia av min demokällkod, och gärna genomföra den här funktionen i ett antal projekt!