Soru HTML5'te giriş türü = “metin” vs giriş tipi = “arama”


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

Yani, arasındaki fark nedir input type="text" ve input type="search" HTML5’te

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


102
2017-07-21 05:33


Menşei


html5tutorial.info/html5-search.php - Marc B


Cevaplar:


Şu an, aralarında çok büyük bir anlaşma yok - belki asla olmayacak. Ancak, bu nokta tarayıcı tarayıcılara istedikleri takdirde özel bir şey yapma yeteneği vermektir.

Hakkında düşün <input type="number"> cep telefonlarında, sayı pedlerini veya type="email" Klavyenin özel bir sürümünü, @ ve .com ve diğerlerini kullanarak getirin.

Bir cep telefonunda, arama yapmak istedikleri takdirde dahili bir arama uygulaması olabilir.

Diğer tarafta, css ile mevcut devs yardımcı olur.

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

146
2017-07-21 05:41



İki geçerli puan için +1, 1) internal search applet for mobile phone. 2)ability to make better presentation. Ancak, cevabı kabul etmeyi beklemeliyim, çünkü başka bir amaç olmadığından emin olmak istiyorum :) - Vijin Paulraj
Şu an yok. Girişlerin hepsi ya sadece isimlerdir (giriş [tip = renk] için sadece kısmi destek var gibi) ya da tarayıcılar kendi özel işlemlerini gerçekleştirmişlerdir (type = number ya da type = email ya da type = range). Başka seçenek yok - ya tarayıcı tarafından özel bir işlem var, ya da değil. Şu anda çoğu tarayıcıda = arama yapmıyor ve büyük olasılıkla (iTunes'da veya başka bir uygulamada arama kutusu gibi görünmesini sağlayan MAYBE hariç) yazmıyor. Şu anda var, böylece bir arama kutusu olduğunu bilerek ekstra işlevsellik / sunum ekleyebilirsiniz. - Norguard
Bir fark, bir arama girişindeki [Esc] 'ye basmanın sonuçları temizleyeceğidir. Kullanıcılarınız sık kullanıyorsanız, kullanışlıdır. - Josh Habdas
@JoshH olduğu süper kullanışlı. Şu anda hangi tarayıcıları (ve sürümleri) etkileyen herhangi bir fikir var mı? Cevabı güncellemeye ve şimdi bir buçuk yıl öncesine göre peyzajın şu anda çok farklı olduğu düşünülürse, her daim yeşillerin mevcut (/ gelecekteki) durumuna getirmeye istekli olurdum. - Norguard
Değiştirilen öğeler üzerinde sözde elemanlar kullanmanızı önermem: standartlara aykırıAncak bazı durumlarda çalışır. - Paul Kozlovitch


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

WebKit'te varsayılan olarak bir arama girişi yuvarlanmış bir iç sınırına sahiptir   köşeler ve sıkı tipografik kontrol.

Ayrıca,

Bu, bilmediğim herhangi bir yerde belgelenmemiş,   Ancak, girdiye bir sonuç parametresi eklerseniz, WebKit uygulanacaktır   önceki gösteren bir açılan ok ile küçük bir büyüteç   Sonuçlar.

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

Referans

Her şeyden önce, anlamsal bir anlam sağlar input type.

Güncelleştirme:

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


26
2017-07-21 05:41





Görsel / işlevsel olarak, giriş tipi ise 2 farkarama': -

  1. Sen bir alX'kutudaki metinleri temizlemek için giriş / arama kutusunun sonundaki sembol
  2. BasmakESC'klavye tuşu da metinleri temizler

15
2018-02-08 07:31





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

Daha fazla bilgi


7
2017-07-17 15:49



Chrome 51 desteği kaldırıldı results özellik: developers.google.com/web/updates/2016/08/... - Flimm


Aslında hiçbir şey yapmadığını varsaymak konusunda çok dikkatli olun. Tip arama ile stil girdilerine gittiğinizde, değiştirilemeyen belirli özelliklere sahipsiniz. Birindeki sınırı değiştirmeye çalış ve onu oldukça imkansız bulursun. İzin verilmeyen diğer CSS özellikleri de vardır. bu tüm ayrıntılar için.

Ayrıca, Jashwant'ın belirttiği gibi, sonuç özniteliği de vardır, ancak autosave özniteliğini de dahil etmedikçe çok iyi çalışmaz. Ancak, açılan tarayıcı çoğu tarayıcıda çalışmayacaktır, bu nedenle kendi tehlikenizde kullanın.


3
2018-04-26 00:20





Bazı kelimeler yazdığınızda, girişte ESC'ye tuşlandığında eylemde tarayıcı farkı var type="search" krom / safari'de giriş kutusu temizlenir. ama içinde type="text" senaryo, kelimeler temizlenmez. Bu nedenle, özellikle otomatik tamamlama veya arama ile ilgili özellik için kullandığınızda, türü seçerken dikkatli olun.


2
2017-11-20 01:05





Bonus puanı: input type="search"kullanma yeteneğine sahiptir onsearch özniteliği (bunun farkına rağmen, Microsoft'un yeni Edge Browser'da çalışmaz) onkeypress=if(key=13) { function() } şey.


2
2017-08-18 15:29





input type = "search" kullanarak, kullanıcı deneyimini geliştirebilecek keybord enterkey'in metin şovunu "ara" yapar. Ancak, bu türü kullanıyorsanız stili ayarlamanız gerekir.


2
2017-12-08 02:36





İşlevlerin çoğunluğu aynıdır ancak tarayıcıları kullanarak görebildiğimiz 1 fark search SAFARI ve CHROME'da giriş biraz farklıdır. Sağ tarafta "x" simgesi eklediler, ama o FireFox, IE için aynı şey, vb.

Kısaca Firefox, IE, Opera, sadece safari ve krom için bir fark yok. RAW Veri Yapıştır İşlevlerin çoğunluğu aynıdır ancak tarayıcıları kullanarak görebildiğimiz 1 fark search SAFARI ve CHROME'da giriş biraz farklıdır. Sağ tarafta "x" simgesi eklediler, ama o FireFox, IE için aynı şey, vb.

Kısaca Firefox, IE, Opera, sadece safari ve krom için bir fark yok.


2
2018-01-28 16:42





Programcıların bakış açısına bağlı olarak, bir programcı girdinin amacını türüne bakarak kolayca belirleyebilir ve CSS stilleri için kolay ve JavaScript veya JQuery için girişlerdeki kuralı doğrulamaktır.


1
2018-03-09 05:17





Ancak, eğer giriş yaparsanız yout giriş öğesi üzerinde kötü bir etkisi vardır.

<input type="search">

Ve senin cssinde ayarla

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

Hiç göstermeyecek.


0
2018-03-13 09:07