Soru iOS5, type = “number” veya type = “tel” kullanmadan varsayılan olarak sayısal tuş takımını gösterir.


İOS5'in piyasaya sürülmesiyle birlikte Apple, kendi doğrulama değerini input type = "number" form alanlarına ekledi. Bu bazı sorunlara neden oluyor; Bunu özetleyen aşağıdaki soruya bakın:

Giriş türü = 'sayı' yeni doğrulama, iPhone iOS5 için Safari'de ve Mac için en son Safari'de baştaki sıfırları ve biçimlerdeki sayıları kaldırır

Giriş tipi = "tel", iphone'da sayısal bir tuş takımı açmak için işe yaramasına rağmen, telefon tuş takımı ondalık puanı olmayan

Sayısal tuş takımını html / js kullanarak varsayılan olarak ayarlamanın bir yolu var mı? Bu bir iphone uygulaması değil. En azından tuş takımında sayılara ve ondalık noktaya ihtiyacım var.

Güncelleştirme

Safari 5.1 / iOS 5'deki sayı girişi alanları sadece rakam ve ondalık sayıları kabul eder. Girişlerimden birinin varsayılan değeri 500.000 $. Bu, Safari'nin boş bir giriş alanı göstermesiyle sonuçlanır, çünkü $,% geçersiz karakterlerdir.

Ayrıca, kendi doğrulamayı çalıştırdığımda onblurSafari, giriş alanını temizler çünkü değer için $ ekliyorum.

Böylece Safari 5.1 / iOS5'in giriş tipi = "sayı" uygulaması kullanılmaz hale getirdi.

jsfiddle

Deneyin burada - http://jsfiddle.net/mjcookson/4ePeE/ 500.000 dolarlık varsayılan değer, Safari 5.1'de görünmez, ancak $ ve sembollerini kaldırırsanız, o olur. Sinir bozucu.


36
2017-11-22 05:46


Menşei


neden baştaki sıfırlara ihtiyacınız var? herhangi bir gerçek sayının değerini etkilemezler - esqew
@esqew: Belki bir ID numarası. Örneğin, Öğrenci Kimlik numaramın başında sıfır var. - Evan Mulawski
@Evan Mulawski daha sonra bir sayı değil, bir dize olarak saklanır. Önde gelen sıfırlarla bir sayıyı temsil etmek imkansız. - Strelok
@esqew: Baştaki sıfırların bazen neden gerekli olduğunun sadece bir örneğiydi. Kimlik numaraları da baştaki sıfırları kullanan tek sayı değil. - Evan Mulawski
Aptalca şey şu ki, girilen giriş tipi = "sayı" klavyesi hala sembol tuşlarına sahiptir ve bunları seçebilirsiniz. Ancak Bitti düğmesine bastığınızda, giriş alanından sıyrılırlar. Apple'ın parçası hakkındaki korkunç UX kararı bence. - azdev


Cevaplar:


Alanı semboller içerecek şekilde şekillendirmek

Bu, içindeki sembollerin dahil edilmesi söz konusu olduğunda number alanında, böyle bir çözüm kullanabilirsiniz:

HTML:

<span id="number-container">
    <input type="number" name="number" id="number-field" value="500" />
    <span id="number-container-symbol">$</span>
</span>

CSS:

#number-container {
    position: relative;
}
#number-container-symbol {
    left: 5pt;
    position: absolute;
    top: 0px;
}
#number-field {
    background-color: transparent;
    padding-left: 10pt;
}

Bir kavram kanıtı olarak davranın. Görmek bu jsfiddle canlı bir örnek için. Chrome'da şöyle görünür:

enter image description here

Daha küçük ayrıntıların tanımlanması

Dayalı Sayı girişi ile ilgili dokümantasyon (Editörün Taslak), için ayrıntı düzeyini tanımlamak eklemelisin step="<some-floating-point-number>" özniteliği <input> etiket:

<input type="number" name="number" value="500.01" step="0.01" />

ve birçok modern tarayıcıda çalışacak. Görmek bu jsfiddle testler için.

Sonuç

İhtiyacınız olan sembolleri içerecek şekilde stil edebilmelisiniz. Belgelere göre, kayan nokta sayıları için destek sağlayan bir özellik de vardır.

Alternatif çözüm - başka bir şeyin önünde boş alan

Sen de yapabilirsin Giriş alanının içeriğini gördüğüne inandırmakama ona alanın arkasında başka bir şey göster (bu benim orijinal çözümümün bir uzantısıdır). Daha sonra birisi alana dokunursa, uygun değeri vb. Çoğaltabilirsiniz, sonra bulanıklıktaki bir önceki duruma geri dönebilirsiniz. Bu kodu görjsfiddle'ta canlı örnek - mavi renk, alanın içinde olmayan bir şeye bakıyor olduğunuz anlamına gelir):

// store original value from INPUT tag in jQuery's .data()
var input_field = jQuery('#number-field');
var display_span = jQuery('#number-container-value');
var base_val = parseFloat(input_field.val());
input_field.data('storedVal', base_val);
input_field.val('');
display_span.html(base_val);

// react to field gaining and losing focus
jQuery('#number-field').on('focus', function(event){
    var el = jQuery(this);
    var display = jQuery('#number-container-value');
    if (typeof el.data('storedVal') != 'undefined'){
        el.val(el.data('storedVal'));
    };
    display.html('');
}).on('blur', function(event){
    var el = jQuery(this);
    var display = jQuery('#number-container-value');
    var new_val = parseFloat(el.val());
    el.data('storedVal', new_val);
    display.html(new_val);
    el.val('');
});

(stil ile tam kod belirtilen jsfiddle üzerinde). Kodun kısaltılması ve temizlenmesi gerekiyor, ama bu bir kavramın ispatı. Deneyin ve bulgularınızı paylaşın lütfen.


16
2017-11-27 23:31





Neden giriş alanının dışına $ koyma (etiket olarak). Ya da giriş alanının sağındaki yüzde işareti? Sorununuzu çözecek gibi görünüyor ve giriş tipi = "sayı" kullanabilecektiniz ve sadece işe yarayacaktı.


7
2017-11-27 23:18





Kaya ve sert bir yer arasında sıkışmışsın. HTML spesifikasyonunda bir yer bulunana kadar type="currency" (ve bu muhtemelen farklı ülkelerin para birimi yazmanın farklı yollarından hiçbir zaman gerçekleşmeyecek), problemin üstesinden gelmek için bazı JS sihirlerini kullanmak zorunda kalacaksınız.

Tabii ki numara ya da telefon en iyi fikir olmayacak, ancak biraz JS kurnazlık kullanarak bu çözüm ile geldim:

var i   = document.getElementById( 'input' );

i.onblur    = function()
{
    i.type  = 'text';

    i.value = number_format( i.value );
}

i.onfocus   = function()
{
    var v   = Number( i.value.replace( /\D/, '' ) );

    i.type  = 'number';

    i.value = v > 0 ? v : '';
}

Sadece odak / bulanıklığa bağlı olarak girişin türünü değiştiririm, bu kullanıcı metin alanını terk ettikten sonra, kıçını biçimlendirebiliriz demektir. Kullanıcı döndüğünde, değeri alırız, eğer 0 olan bir tane varsa ve onu bir sayı olarak tekrar yapıştırırız. İşte çalışma testi, umarım yardımcı olur: http://jsfiddle.net/ahmednuaman/uzYQA/


5
2017-11-30 10:24



Aslında type='currency' yerelleştirme ayarları vb. temelinde uygulanabilir. Böyle bir alanın ihtiyacı olan tek bilgi para birimi (örn. "USD", "EUR" vb.) ve isteğe bağlı olarak biçimlendirilebilir (örn. "12 USD" olarak gösterilip gösterilmeyeceği). veya "$ 12", yerelleştirme ayarlarına bağlı olabilir). Değer daha sonra bir tamsayı veya bir float olabilir. Ancak bu OP'nin sahip olduğu sorunla alakasızdır :) - zizozu


Aşağıdaki iOS5 ile iPad için sayısal klavyeyi açar, herhangi yazılacak karakter, ve izin verir herhangi ayarlanacak değer:

<input type="text" pattern="\d*">

Ancak, çirkin, kırılgan (muhtemelen gelecekte kırılacak ...), ve iPhone üzerinde çalışmıyor (iPhone, 0'a 9 izin veren sayısal tuş takımını gösterir). Çözüm sadece deseni kullanarak çalışır gibi görünüyor \d* veya eşdeğeri [0-9]*.

Belki kullanmak daha iyi type="tel" Aynı davranıyor gibi görünüyor.


3
2018-05-16 02:09





Çalışma çözümü: iPhone 5, Android 2.3, 4 üzerinde test edilmiştir

Tadeck'in çözümü (ödül kazananı) <span> giriş alanı sembollerini içerecek ve biçimlendirilmiş bir yer <span> Para birimi girdisinin üstünde aslında ne yaptım bitti.

Son kodum farklı ve kısa olsa da, burayı buraya gönderiyorum. Bu çözüm, giriş alanlarındaki $,% sembollerinin iOS5 doğrulama sorununu çözüyor ve bu nedenle input type="number" varsayılan olarak kullanılabilir.

Sembol alanı "xx%" "xx yıl"

<input name="interest-rate" value="6.4" maxlength="4" min="1" max="20" />
<span class="symbol">%</span>
  • Sembolü görüntülemek için sadece bir sayı giriş alanı ve girişin dışındaki bir açıklık kullanın.

Para birimi alanı "$ Xxx, xxx"

<span id="formatted-currency">$500,000</span>
<input id="currency-field" type="number" name="loan-amount" value="500000" maxlength="8" min="15000" max="10000000" />
  • Açıklığı para birimi girişinin üstüne yerleştirin ve girişi görüntü yok
  • Bir kullanıcı yayılma alanını tıkladığında / dokunduğunda, aralığını gizleyin ve giriş. Açıklığı mükemmel şekilde konumlandırırsanız geçiş sorunsuzdur.
  • Sayı giriş tipi, doğrulamayı dikkate alır.
  • Bulanıklığı ve girişin gönderilmesi üzerine, span html değerini giriş olarak ayarlayın. değer. Açıklığı biçimlendirin. Girişi gizle ve açıklığı biçimlendirilmiş değer.

$('#formatted-currency').click(function(){
    $(this).hide();
    $('#currency-field').show().focus();
});
$('#currency-field').blur(function(){
    $('#formatted-currency').html(this.value);
    $('#formatted-currency').formatCurrency({
        roundToDecimalPlace : -2
    });
    $(this).hide();
    $('#formatted-currency').show();
});
// on submit
$('#formatted-currency').html($('#currency-field').val());
$('#formatted-currency').formatCurrency({
    roundToDecimalPlace : -2
});
$('#currency-field').hide();
$('#formatted-currency').show();

3
2018-03-19 01:39





Benzer bir sorunla karşılaştım ve iPad'in sayısal tuş takımını açmasına neden olan bu çirkin çirkin çözümle karşılaştım.

Sorun şu ki, safari filtre, form gönderildiğinde basamak hariç her şeyi uzaklaştırdı ve örneğin "3/7" veya "65 $" gibi çeşitli ekstra karakterlere ihtiyacım vardı.

var elem = document.getElementById('MathAnswer');
elem.type = 'number';

elem.onfocus = function() {
  setTimeout(function() {
    elem.type = 'text'; 
  }, 1);
};

Girdi tipini 'text' olarak ayarlamanız yeterlidir. sonra iPad, sayısal tuş takımını gösterdi ve voila, safari artık rakam olmayanları kaldırmıyor.

Umarım birisine yardım eder!


2
2017-07-16 22:10



Ayy, @robocat'ın benzer bir cevap vermiş olduğunu gördüm, ama cevabım onun fikrine katkıda bulunabilir. :) - Snorvarg


IPhone için sorun etrafında başka bir yolu var:

<input id="test" TYPE="text" value="5.50" ontouchstart="this.type='number'" onfocus="this.type='text'" />

Bu, sayıyı sayıya değiştirir önce giriş dokunduğunda odaklanır (sayısal klavyenin gösterdiği şekilde) ve sonra yazı tipini metne dönüştürür, böylece doğru değer düzenlenebilir.

Güvenilir şekilde çalışmak, örneğin, zor olabilir. Şu anda girişe dokunun ama sonra parmak kontrolü kapalı kaydırın tip = sayı olarak bırakır ve diğer konular arasında, klavyede İleri düğmesini algılamak için bir yol düşünemiyorum.


0
2018-05-16 02:49