Esas olarak mobil tarayıcılar için olan web uygulaması geliştiriyorum. Sayı türünde giriş alanları kullanıyorum, bu nedenle (çoğu) mobil tarayıcı daha iyi kullanıcı deneyimi için yalnızca sayı klavyesini çalıştırır. Bu web uygulaması esas olarak ondalık ayırıcının nokta değil virgül olduğu bölgelerde kullanılıyor, bu yüzden her iki ondalık ayırıcıyı da kullanmam gerekiyor.

Bütün bu karışıklık nokta ve virgülle nasıl kapatılır?

Bulgularım:

Masaüstü Chrome

• Giriş türü = sayı
• Kullanıcı, giriş alanına "4,55" girer
• $("#my_input").val(); "455" değerini döndürür
• Girişten doğru değeri alamıyorum

Masaüstü Firefox

• Giriş türü = sayı
• Kullanıcı, giriş alanına "4,55" girer
• $("#my_input").val(); "4,55" değerini döndürür
• Sorun değil, virgül yerine nokta koyup doğru kayan noktayı elde edebilirim

Android tarayıcı

• Giriş türü = sayı
• Kullanıcı, giriş alanına "4,55" girer
• Giriş odağı kaybettiğinde, değer "4" olacak şekilde kesilir
• Kullanıcı için kafa karıştırıcı

Windows Phone 8

• Giriş türü = sayı
• Kullanıcı, giriş alanına "4,55" girer
• $("#my_input").val(); "4,55" değerini döndürür
• Sorun değil, virgül yerine nokta koyup doğru kayan noktayı elde edebilirim

Kullanıcının ondalık ayırıcı olarak virgül veya nokta kullanabileceği ve daha iyi bir kullanıcı deneyimi sağlamak için html giriş türünü sayı olarak tutmak istediğim bu tür durumlarda "en iyi uygulamalar" nelerdir?

Virgülü "anında" noktaya dönüştürebilir miyim, anahtar olayları birleştirebilir miyim, sayı girişleriyle çalışıyor mu?

DÜZENLE

Currenlty Herhangi bir çözümüm yok, hangi tipin sayıya ayarlandığı girdiden float değeri (dizi veya sayı olarak) nasıl alınır. Son kullanıcı "4,55" girerse, Chrome her zaman "455", Firefox "4,55" döndürür, bu da bir sorun değildir.

Ayrıca Android'de (4.2 öykünücüsü test edildi), giriş alanına "4,55" girip odağı başka bir yere değiştirdiğimde, girilen sayının "4" olarak kesilmesi oldukça can sıkıcı.

Sanırım yukarıdaki cevaplarda eksik olan, stepöznitelik için varsayılan değeri olan farklı bir değer belirtme ihtiyacı 1. Girişin doğrulama algoritmasının kayan nokta değerlerine izin vermesini istiyorsanız, buna göre bir adım belirtin.

Örneğin, dolar tutarları istedim, bu yüzden şöyle bir adım belirledim:

 <input type="number" name="price"
           pattern="[0-9]+([\.,][0-9]+)?" step="0.01"
            title="This should be a number with up to 2 decimal places.">

Değeri almak için jQuery'yi kullanmakta yanlış bir şey yoktur, ancak öğelerin validity.validözelliğini almak için doğrudan DOM API'yi kullanmanın yararlı olduğunu göreceksiniz .

Ondalık noktayla benzer bir sorun yaşadım, ancak bir sorun olduğunu anlamamın nedeni, Twitter Önyükleme'nin geçersiz değere sahip bir sayı girişine eklediği stilden kaynaklanıyordu.

İşte stepözniteliğin eklenmesinin işe yaradığını gösteren ve ayrıca mevcut değerin geçerli olup olmadığını test eden bir keman :

• jsFiddle

TL; DR: a stepniteliğini bir kayan nokta değerine ayarlayın, çünkü varsayılan değerdir 1.

NOT : Virgül benim için geçerli değildir, ancak işletim sistemi dil / bölge ayarlarımı ondalık ayırıcı olarak virgül kullanan bir yere ayarlarsam işe yarayacağından şüpheleniyorum. * nottaki not *: Ubuntu / Gnome 14.04'te OS dili / klavye ayarları * Almanca * için durum böyle değildi.

W3.org'a göre , sayı girişinin değer özelliği kayan noktalı sayı olarak tanımlanır . Kayan nokta sayısının sözdizimi, yalnızca noktaları ondalık ayırıcılar olarak kabul ediyor gibi görünüyor.

Size yardımcı olabilecek birkaç seçeneği aşağıda listeledim:

1. Kalıp özelliğini kullanma

İle desen özelliğinde bir HTML5 uyumlu bir şekilde normal bir ifade ile izin biçimi belirtebilirsiniz. Burada virgül karakterine izin verildiğini ve model başarısız olursa yardımcı bir geri bildirim mesajı belirtebilirsiniz.

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

Not: Tarayıcılar arası destek çok değişiklik gösterir. Tam, kısmi veya hiç olmayabilir ..

2. JavaScript doğrulaması

Örneğin virgülün yerini alacak veya hepsini birlikte doğrulayacak onchange (ve / veya bulanıklık ) olayına basit bir geri aramayı bağlamayı deneyebilirsiniz .

3. Tarayıcı doğrulamasını devre dışı bırakın ##

Üçüncü olarak , o alan için tarayıcı doğrulamasını hep birlikte devre dışı bırakmak amacıyla sayı girişlerinde formnovalidate özniteliğini kullanmayı deneyebilirsiniz .

<input type="number" formnovalidate />

4. Kombinasyon ..?

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

Ondalık ayırıcı için virgül mü yoksa nokta mı kullanacağınız tamamen tarayıcıya bağlıdır. Tarayıcı, işletim sisteminin veya tarayıcının yerel ayarına göre karar verir veya bazı tarayıcılar web sitesinden ipuçları alır. Farklı tarayıcıların farklı yerelleştirme yöntemlerini nasıl desteklediğini gösteren bir tarayıcı karşılaştırma tablosu yaptım . Safari, virgül ve noktaları birbirinin yerine işleyen tek tarayıcıdır.

Temel olarak, bir web yazarı olarak bunu gerçekten kontrol edemezsiniz. Bazı geçici çözümler, tamsayılarla iki giriş alanı kullanmayı içerir. Bu, her kullanıcının verileri beklediğiniz gibi girmesini sağlar. Özellikle seksi değil, ancak her durumda tüm kullanıcılar için işe yarayacak.

valueAsNumberBunun yerine kullanın .val().

girdi. valueAsNumber [= değer]

Varsa, form denetiminin değerini temsil eden bir sayı döndürür; aksi takdirde null döndürür.
Değeri değiştirmek için ayarlanabilir.
Denetim tarih veya zaman temelli ya da sayısal değilse, INVALID_STATE_ERR istisnası atar.

bir metin türü kullanır ancak sayısal klavyenin görünümünü zorlar

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

inputmode etiketi çözümdür

Mükemmel bir çözüm bulamadım ancak yapabileceğim en iyi şey type = "tel" kullanmak ve html5 doğrulamasını devre dışı bırakmaktı (formnovalidate):

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

Kullanıcı virgül koyarsa, denediğim her modern tarayıcıda virgülle çıktı alacaktır (en son FF, IE, edge, opera, chrome, safari masaüstü, android chrome).

Asıl sorun şudur:

• Mobil kullanıcılar, sayı klavyesinden farklı olabilecek telefon klavyelerini göreceklerdir.
• Daha da kötüsü, telefon klavyesinde virgül için bir tuş bile olmayabilir.

Kullanım durumum için sadece şunları yapmam gerekiyordu:

• Başlangıç ​​değerini virgülle görüntüleyin (firefox bunu tür = sayı olarak çıkarır)
• Html5 doğrulaması başarısız değil (virgül varsa)
• Alanın tam olarak girdi olarak okunmasını sağlayın (olası bir virgülle)

Benzer bir gereksiniminiz varsa, bu sizin için çalışmalıdır.

Not: Desen özelliğinin desteğini beğenmedim. Formnovalidat çok daha iyi çalışıyor gibi görünüyor.

Aradığınızda $("#my_input").val();dize değişkeni olarak döner. Öyleyse kullanın parseFloatve parseIntdönüştürmek için. Kullandığınızda parseFloatmasaüstü veya telefon KENDİNİ değişkenin anlamını anlar.

Ayrıca toFixed, aşağıdaki gibi basamak sayısı argümanına sahip olan bir float'ı dizeye dönüştürebilirsiniz :

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01

Görünüşe göre Tarayıcıların hala sorunları var (Chrome ve Firefox Nightly iyi olsa da). Gerçekten bir sayı alanı kullanmak zorunda olan insanlar için (belki de metin alanlarının sahip olmadığı küçük oklar yüzünden) hilekâr bir yaklaşımım var.

Çözümüm

keyupForm girişine bir olay İşleyicisi ekledim ve durumu izledim ve tekrar geçerli olduğunda değeri ayarladım.

Saf JS Snippet JSFIDDLE

var currentString = '';
var badState = false;
var lastCharacter = null;

document.getElementById("field").addEventListener("keyup",($event) => {
  if ($event.target.value && !$event.target.validity.badInput) {
          currentString = $event.target.value;
  } else if ($event.target.validity.badInput) {
    if (badState && lastCharacter && lastCharacter.match(/[\.,]/) && !isNaN(+$event.key)) {
      $event.target.value = ((+currentString) + (+$event.key / 10));
      badState = false;
    } else {
      badState = true;
    }
  }
  document.getElementById("number").textContent = $event.target.value;
  lastCharacter = $event.key;
});

document.getElementById("field").addEventListener("blur",($event) => {
	if (badState) {
    $event.target.value = (+currentString);
    badState = false;
		document.getElementById("number").textContent = $event.target.value;
  }
});

#result{
  padding: 10px;
  background-color: orange;
  font-size: 25px;
  width: 400px;
  margin-top: 10px;
  display: inline-block;
}

#field{
  padding: 5px;
  border-radius: 5px;
  border: 1px solid grey;
  width: 400px;
}

<input type="number" id="field" keyup="keyUpFunction" step="0.01" placeholder="Field for both comma separators">

<span id="result" >
 <span >Current value: </span>
 <span id="number"></span>
</span>

Açısal 9 Snippet

@Directive({
  selector: '[appFloatHelper]'
})
export class FloatHelperDirective {
  private currentString = '';
  private badState = false;
  private lastCharacter: string = null;

  @HostListener("blur", ['$event']) onBlur(event) {
    if (this.badState) {
      this.model.update.emit((+this.currentString));
      this.badState = false;
    }
  }

  constructor(private renderer: Renderer2, private el: ElementRef, private change: ChangeDetectorRef, private zone: NgZone, private model: NgModel) {
    this.renderer.listen(this.el.nativeElement, 'keyup', (e: KeyboardEvent) => {
      if (el.nativeElement.value && !el.nativeElement.validity.badInput) {
        this.currentString = el.nativeElement.value;
      } else if (el.nativeElement.validity.badInput) {
        if (this.badState && this.lastCharacter && this.lastCharacter.match(/[\.,]/) && !isNaN(+e.key)) {
          model.update.emit((+this.currentString) + (+e.key / 10));
          el.nativeElement.value = (+this.currentString) + (+e.key / 10);
          this.badState = false;
        } else {
          this.badState = true;
        }
      }       
      this.lastCharacter = e.key;
    });
  }
  
}

<input type="number" matInput placeholder="Field for both comma separators" appFloatHelper [(ngModel)]="numberModel">

Benim tavsiyem? JQuery'yi hiç kullanmayın. Seninle aynı sorunu yaşadım. Bunun $('#my_input').val()her zaman bazı tuhaf sonuçlar verdiğini buldum .

Kullanmaya çalışın document.getElementById('my_input').valueAsNumberyerine $("#my_input").val();ve sonra, kullanmak Number(your_value_retrieved)Numara oluşturmaya çalışmak. Değer NaN ise, bunun bir sayı olmadığını kesinlikle bilirsiniz.

Eklenecek bir şey, girişin üzerine bir sayı yazdığınızda, girişin hemen hemen her karakteri kabul edeceğidir (euro işaretini, bir doları ve diğer tüm özel karakterleri yazabilirim), bu nedenle değeri almak en iyisidir. .valueAsNumberjQuery kullanmak yerine.

Oh, ve BTW, kullanıcılarınızın uluslararasılaştırma eklemesine izin verir (yani: ondalık sayılar oluşturmak için nokta yerine virgül desteği). Sadece Number()nesnenin sizin için bir şeyler yaratmasına izin verin ve tabiri caizse ondalık güvenli olacaktır.

Sayısal girişlerinizde toLocaleString () kullanmak istiyorsunuz gibi görünüyor.

Kullanımı için https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString adresine bakın .

JS'de sayıların yerelleştirilmesi, Chrome için çalışmayan Uluslararasılaştırma (Sayı biçimlendirmesi "num.toLocaleString ()") kapsamındadır