Saya sedang membangun aplikasi web yang terutama untuk browser seluler. Saya menggunakan bidang input dengan tipe angka, jadi (kebanyakan) browser seluler hanya memanggil papan tombol angka untuk pengalaman pengguna yang lebih baik. Aplikasi web ini terutama digunakan di daerah di mana pemisah desimal koma, bukan titik, jadi saya perlu menangani kedua pemisah desimal.

Bagaimana cara menutupi seluruh kekacauan ini dengan titik dan koma?

Temuan saya:

Chrome Desktop

• Jenis input = angka
• Pengguna memasukkan "4,55" ke kolom input
• $("#my_input").val(); mengembalikan "455"
• Saya tidak bisa mendapatkan nilai yang benar dari input

Firefox Desktop

• Jenis input = angka
• Pengguna memasukkan "4,55" ke kolom input
• $("#my_input").val(); mengembalikan "4,55"
• Baiklah, saya bisa mengganti koma dengan titik dan mendapatkan float yang benar

Browser Android

• Jenis input = angka
• Pengguna memasukkan "4,55" ke kolom input
• Ketika input kehilangan fokus, nilai terpotong menjadi "4"
• Membingungkan bagi pengguna

Windows Phone 8

• Jenis input = angka
• Pengguna memasukkan "4,55" ke kolom input
• $("#my_input").val(); mengembalikan "4,55"
• Baiklah, saya bisa mengganti koma dengan titik dan mendapatkan float yang benar

Apa "praktik terbaik" dalam situasi seperti ini ketika pengguna dapat menggunakan koma atau titik sebagai pemisah desimal dan saya ingin mempertahankan tipe input html sebagai angka, untuk memberikan pengalaman pengguna yang lebih baik?

Dapatkah saya mengonversi koma ke titik "on the fly", mengikat acara utama, apakah itu berfungsi dengan input angka?

EDIT

Currenlty Saya tidak punya solusi, bagaimana mendapatkan nilai float (sebagai string atau angka) dari input yang jenisnya diatur ke angka. Jika pengguna akhir memasukkan "4,55", Chrome selalu kembali "455", Firefox mengembalikan "4,55" yang baik-baik saja.

Juga cukup menjengkelkan bahwa di Android (diuji emulator 4.2), ketika saya memasukkan "4,55" ke kolom input dan mengubah fokus ke tempat lain, nomor yang dimasukkan terpotong menjadi "4".

Saya pikir apa yang hilang dalam jawaban di atas adalah kebutuhan untuk menentukan nilai yang berbeda untuk stepatribut, yang memiliki nilai default 1. Jika Anda ingin algoritma validasi input memungkinkan nilai floating-point, tentukan langkah yang sesuai.

Misalnya, saya ingin jumlah dolar, jadi saya menetapkan langkah seperti ini:

 <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.">

Tidak ada yang salah dengan menggunakan jQuery untuk mengambil nilainya, tetapi Anda akan merasa berguna untuk menggunakan API DOM secara langsung untuk mendapatkan validity.validproperti elemen .

Saya memiliki masalah yang sama dengan titik desimal, tetapi alasan saya menyadari ada masalah adalah karena gaya yang ditambahkan Twitter Bootstrap ke input angka dengan nilai yang tidak valid.

Berikut biola yang menunjukkan bahwa penambahan stepatribut membuatnya berfungsi, dan juga menguji apakah nilai saat ini valid:

• jsFiddle

TL; DR: Setel stepatribut ke nilai titik-mengambang, karena itu default ke 1.

CATATAN : Koma tidak memvalidasi untuk saya, tetapi saya menduga bahwa jika saya mengatur pengaturan bahasa / wilayah OS saya ke suatu tempat yang menggunakan koma sebagai pemisah desimal, itu akan berfungsi. * note in note *: itu tidak terjadi untuk pengaturan bahasa OS / keyboard * Jerman * di Ubuntu / Gnome 14.04.

Menurut w3.org, atribut nilai dari input angka didefinisikan sebagai angka floating-point . Sintaks angka floating-point tampaknya hanya menerima titik sebagai pemisah desimal.

Saya telah mendaftarkan beberapa opsi di bawah ini yang mungkin bermanfaat bagi Anda:

1. Menggunakan atribut pola

Dengan atribut pattern, Anda dapat menentukan format yang diizinkan dengan ekspresi reguler dengan cara yang kompatibel dengan HTML5. Di sini Anda dapat menentukan bahwa karakter koma diizinkan dan pesan umpan balik yang bermanfaat jika polanya gagal.

<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."/>

Catatan: Dukungan lintas-browser sangat bervariasi. Mungkin lengkap, sebagian atau tidak ada ..

2. Validasi JavaScript

Anda dapat mencoba untuk mengikat panggilan balik sederhana untuk misalnya acara onchange (dan / atau blur ) yang akan menggantikan koma atau memvalidasi semua bersama-sama.

3. Nonaktifkan validasi browser ##

Ketiga, Anda bisa mencoba menggunakan atribut formnovalidate pada input angka dengan maksud menonaktifkan validasi browser untuk bidang itu secara bersamaan.

<input type="number" formnovalidate />

4. Kombinasi ..?

<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."/>

Apakah menggunakan koma atau titik untuk pemisah desimal sepenuhnya tergantung pada browser. Peramban membuat keputusan berdasarkan lokasi sistem operasi atau peramban, atau beberapa peramban mengambil petunjuk dari situs web. Saya membuat bagan perbandingan browser menunjukkan bagaimana dukungan browser yang berbeda menangani metode pelokalan yang berbeda. Safari menjadi satu-satunya browser yang menangani koma dan titik secara bergantian.

Pada dasarnya, Anda sebagai penulis web tidak dapat benar-benar mengendalikan ini. Beberapa solusi melibatkan penggunaan dua bidang input dengan bilangan bulat. Ini memungkinkan setiap pengguna untuk memasukkan data seperti yang Anda harapkan. Ini tidak terlalu seksi, tetapi itu akan bekerja di setiap kasus untuk semua pengguna.

Gunakan valueAsNumbersebagai ganti .val().

memasukkan . valueAsNumber [= nilai]

Mengembalikan angka yang mewakili nilai kontrol formulir, jika berlaku; jika tidak, mengembalikan nol.
Dapat diatur, untuk mengubah nilai.
Melemparkan pengecualian INVALID_STATE_ERR jika kontrolnya tidak berbasis tanggal atau waktu atau numerik.

menggunakan jenis teks tetapi memaksa tampilan keyboard numerik

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

tag inputmode adalah solusinya

Saya belum menemukan solusi sempurna tetapi yang terbaik yang bisa saya lakukan adalah menggunakan type = "tel" dan menonaktifkan validasi HTML5 (formnovalidate):

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

Jika pengguna memasukkan koma, ia akan menampilkan koma di setiap browser modern yang saya coba (FF terbaru, IE, edge, opera, chrome, safari desktop, android chrome).

Masalah utamanya adalah:

• Pengguna seluler akan melihat papan ketik ponsel mereka yang mungkin berbeda dengan papan tombol angka.
• Lebih buruk lagi, keyboard ponsel mungkin tidak memiliki kunci untuk koma.

Untuk kasus penggunaan saya, saya hanya perlu:

• Tampilkan nilai awal dengan koma (strip firefox untuk tipe = angka)
• Tidak gagal validasi HTML5 (jika ada koma)
• Biarkan bidang membaca persis sebagai input (dengan kemungkinan koma)

Jika Anda memiliki persyaratan serupa, ini harusnya cocok untuk Anda.

Catatan: Saya tidak suka dukungan atribut pola. Formnovalidate tampaknya bekerja lebih baik.

Ketika Anda memanggilnya $("#my_input").val();kembali sebagai variabel string. Jadi gunakan parseFloatdan parseIntuntuk konversi. Saat Anda menggunakan parseFloatdesktop atau ponsel, ITSELF memahami arti variabel.

Dan ditambah Anda dapat mengkonversi float ke string dengan menggunakan toFixedargumen yang memiliki jumlah digit seperti di bawah ini:

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

Browser tampaknya masih memiliki masalah (meskipun Chrome dan Firefox Nightly baik-baik saja). Saya memiliki pendekatan hacky untuk orang-orang yang benar-benar harus menggunakan bidang angka (mungkin karena panah kecil yang tidak dimiliki bidang teks).

Solusi saya

Saya menambahkan keyupevent Handler ke form input dan melacak status dan mengatur nilainya begitu valid lagi.

Cuplikan JS Murni 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>

Cuplikan 9 Sudut

@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">

Rekomendasi saya? Jangan gunakan jQuery sama sekali. Saya memiliki masalah yang sama seperti Anda. Saya menemukan bahwa $('#my_input').val()selalu mengembalikan beberapa hasil yang aneh.

Coba gunakan document.getElementById('my_input').valueAsNumberalih-alih $("#my_input").val();lalu, gunakanNumber(your_value_retrieved) untuk mencoba membuat Angka. Jika nilainya NaN, Anda tentu tahu bahwa itu bukan angka.

Satu hal yang ditambahkan adalah ketika Anda menulis angka pada input, input sebenarnya akan menerima hampir semua karakter (saya dapat menulis tanda euro, dolar, dan semua karakter khusus lainnya), jadi yang terbaik adalah mengambil nilai menggunakan .valueAsNumberalih-alih menggunakan jQuery.

Oh, dan BTW, yang memungkinkan pengguna Anda untuk menambahkan internasionalisasi (yaitu: mendukung koma alih-alih titik untuk membuat angka desimal). Biarkan saja Number()objek untuk membuat sesuatu untuk Anda dan itu akan menjadi desimal-aman, sehingga untuk berbicara.

Kedengarannya Anda ingin menggunakan toLocaleString () pada input numerik Anda.

Lihat https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString untuk penggunaannya.

Pelokalan angka dalam JS juga tercakup dalam Internasionalisasi (Pemformatan angka "num.toLocaleString ()") tidak berfungsi untuk chrome