giriş türü = "metin" ve giriş türü = HTML5'te "arama"

HTML5'in yeni form giriş alanlarıyla çalışmaya başladığım için HTML5'te yeniyim. Form giriş alanları ile çalışırken, özellikle <input type="text" />ve <input type="search" />IMO ile Safari, Chrome, Firefox ve Opera dahil olmak üzere tüm büyük tarayıcılarda herhangi bir fark yoktu. Arama alanı da normal bir metin alanı gibi davranır.

Yani, arasındaki fark nedir input type="text"ve input type="search"HTML5'teki?

Gerçek amacı nedir <input type="search" />?

Şu anda aralarında çok büyük bir anlaşma yok - belki de asla olmayacak. Bununla birlikte, mesele, tarayıcı üreticilerine, eğer isterlerse, onunla özel bir şey yapma yeteneği vermektir.

@ Ve .com ve geri kalanı mevcut <input type="number">olan cep telefonlarını, sayı type="email"tuşlarını veya klavyenin özel bir sürümünü getirmeyi düşünün .

Cep telefonunda, eğer isterlerse arama bir dahili arama uygulamasını getirebilir.

Öte yandan, css ile mevcut geliştiricilere yardımcı olur.

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

Çoğu tarayıcıda kesinlikle hiçbir şey yapmaz. Sadece bir metin girişi gibi davranır. Bu bir problem değil. Spesifikasyon, özel bir şey yapmasını gerektirmez. WebKit tarayıcıları, öncelikle stil ile biraz farklı davranır.

Varsayılan olarak WebKit'teki bir arama girişinin iç kenarlığı, yuvarlatılmış köşeleri ve katı tipografik denetimi vardır.

Ayrıca,

Bu, bildiğim hiçbir yerde belgelenmemiştir ve spesifikasyonda yer almamaktadır, ancak girdiye bir sonuç parametresi eklerseniz, WebKit, önceki sonuçları gösteren bir açılır ok bulunan küçük bir büyüteç uygulayacaktır.

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

Referans

Her şeyden önce, .NET Framework için anlamsal bir anlam sağlar input type.

Güncelleme:

Chrome 51, results özniteliği desteğini kaldırdı:

Görsel / işlevsel olarak, giriş türü ' arama ' ise 2 fark : -

1. Kutudaki metinleri temizlemek için giriş / arama kutusunun sonunda bir ' X ' sembolü alırsınız
2. Klavyede ' Esc ' tuşuna basmak da metinleri temizler

Bazı tarayıcılarda, büyüteç simgesiyle otomatik "son aramalar" işlevi sağlayan "sonuçlar" ve "otomatik kaydetme" özelliklerini de destekler.

Daha fazla bilgi

Aslında hiçbir şey yapmadığını varsayarken çok dikkatli olun. Tür arama ile stil girişlerine gittiğinizde, değiştirilemeyen belirli niteliklere sahiptirler. Birinde sınırı değiştirmeye çalışın ve bunu oldukça imkansız bulacaksınız. Diğer bazı izin verilmeyen CSS özelliklerini kontrol vardır bu tüm detaylar için.

Ayrıca Jashwant tarafından da belirtildiği gibi sonuç niteliği vardır, ancak otomatik kaydetme özelliğini de eklemediğiniz sürece çok iyi çalışmaz. Açılır menü çoğu tarayıcıda çalışmaz, bu yüzden kendi sorumluluğunuzda kullanın.

Eylemde tarayıcı farkı var, bazı kelimeleri type="search"yazıp ardından krom / safari'de girişte ESC'yi tuşladığınızda , giriş kutusu temizlenir. ama type="text"senaryoda kelimeler anlaşılmayacaktır. Bu nedenle, özellikle otomatik tamamlama veya aramayla ilgili özellik için kullandığınızda türü seçerken dikkatli olun

Bonus puan: input type="search"özelliği kullanma yeteneğine sahiptir onsearch(bunun Microsofts'un yeni Edge Browser'da çalışmadığını fark etsem de), bu da özel bir onkeypress=if(key=13) { function() }şey yazma ihtiyacını ortadan kaldırır .

input type = "search" kullanarak klavye enterkey'nin metninin "arama" göstermesini sağlayın, bu da kullanıcı deneyimini iyileştirebilir. ancak, bu türü kullanıyorsanız stili ayarlamanız gerekir.

Bu, programcıların bakış açısına bağlıdır, bir programcı, türe bakarak girdinin amacını kolayca belirleyebilir ve CSS stili için ve JavaScript veya JQuery'nin girdilerdeki kuralı doğrulaması kolaydır.

Ancak ayarlarsanız, giriş öğesi üzerinde kötü bir etkisi vardır.

<input type="search">

Ve css'inizde ayarladınız

input {background: url("images/search_bg.gif");}

Hiç görünmeyecek.