Bazı tarayıcıların (Chrome gibi) sayı türündeki HTML girdileri için oluşturduğu yeni döndürme kutularını gizlemenin tarayıcılar arasında tutarlı bir yolu var mı? Yukarı/aşağı okların görünmesini engellemek için bir CSS ya da JavaScript yöntemi arıyorum.
<input id="test" type="number">
Bu CSS, webkit tarayıcılar için döndürme düğmesini etkili bir şekilde gizler (Chrome 7.0.517.44 ve Safari Sürüm 5.0.2 (6533.18.5)'de test ettim):
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />
İlgilendiğiniz öğeler için eşleşen CSS özelliklerini aramak için her zaman denetçiyi (webkit, muhtemelen Firefox için Firebug) kullanabilir, Pseudo öğeleri arayabilirsiniz. Bu görüntü type="number" girdi öğesi için sonuçları göstermektedir:
Apple'ın mobil Safari için kullanıcı deneyimi kodlama kılavuzuna]1 göre, iPhone tarayıcısında sayısal bir klavye görüntülemek için aşağıdakileri kullanabilirsiniz:
<input type="text" pattern="[0-9]*" />
\d*
şeklindeki bir pattern
de işe yarayacaktır.
İstediğiniz şey bu değil, ancak bunu WebKit'teki spinbox'larla ilgili bir odak hatası nedeniyle yapıyorum:
// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
var els = document.querySelectorAll("input[type=number]");
for (var el in els)
el.type = "text";
}
İhtiyacınız olan şey konusunda size yardımcı olacak bir fikir verebilir.