Tôi đang xây dựng ứng dụng web chủ yếu dành cho trình duyệt di động. Tôi đang sử dụng các trường đầu vào với loại số, vì vậy (hầu hết) các trình duyệt di động chỉ gọi bàn phím số để có trải nghiệm người dùng tốt hơn. Ứng dụng web này chủ yếu được sử dụng ở các khu vực có dấu tách thập phân là dấu phẩy, không phải dấu chấm, vì vậy tôi cần xử lý cả dấu tách thập phân.

Làm thế nào để che toàn bộ mớ hỗn độn này bằng dấu chấm và dấu phẩy?

Phát hiện của tôi:

Máy tính để bàn Chrome

• Kiểu đầu vào = số
• Người dùng nhập "4,55" vào trường nhập
• $("#my_input").val(); trả về "455"
• Tôi không thể nhận được giá trị chính xác từ đầu vào

Máy tính để bàn Firefox

• Kiểu đầu vào = số
• Người dùng nhập "4,55" vào trường nhập
• $("#my_input").val(); trả về "4,55"
• Đó là tốt, tôi có thể thay thế dấu phẩy bằng dấu chấm và có được float chính xác

Trình duyệt Android

• Kiểu đầu vào = số
• Người dùng nhập "4,55" vào trường nhập
• Khi đầu vào mất tiêu điểm, giá trị bị cắt ngắn thành "4"
• Nhầm lẫn với người dùng

Windows Phone 8

• Kiểu đầu vào = số
• Người dùng nhập "4,55" vào trường nhập
• $("#my_input").val(); trả về "4,55"
• Đó là tốt, tôi có thể thay thế dấu phẩy bằng dấu chấm và có được float chính xác

"Thực tiễn tốt nhất" trong loại tình huống này là gì khi người dùng có thể sử dụng dấu phẩy hoặc dấu chấm làm dấu tách thập phân và tôi muốn giữ loại đầu vào html dưới dạng số, để cung cấp trải nghiệm người dùng tốt hơn?

Tôi có thể chuyển đổi dấu phẩy thành dấu chấm "đang hoạt động", ràng buộc các sự kiện chính, nó có hoạt động với đầu vào số không?

BIÊN TẬP

Currenlty Tôi không có bất kỳ giải pháp nào, làm thế nào để có được giá trị float (dưới dạng chuỗi hoặc số) từ đầu vào loại nào được đặt thành số. Nếu enduser nhập "4,55", Chrome luôn trả về "455", Firefox trả về "4,55" là ổn.

Ngoài ra, điều khá khó chịu là trong Android (trình giả lập 4.2 đã được thử nghiệm), khi tôi nhập "4,55" vào trường nhập và thay đổi tiêu điểm sang một nơi khác, số đã nhập bị cắt ngắn thành "4".

Tôi nghĩ những gì còn thiếu trong các câu trả lời ở trên là cần chỉ định một giá trị khác cho stepthuộc tính, có giá trị mặc định là 1. Nếu bạn muốn thuật toán xác thực của đầu vào cho phép các giá trị dấu phẩy động, chỉ định một bước tương ứng.

Ví dụ: tôi muốn số tiền đô la, vì vậy tôi đã chỉ định một bước như thế này:

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

Không có gì sai khi sử dụng jQuery để lấy giá trị, nhưng bạn sẽ thấy hữu ích khi sử dụng API DOM trực tiếp để lấy thuộc tính của các thành phần validity.valid.

Tôi có một vấn đề tương tự với dấu thập phân, nhưng lý do tôi nhận ra có một vấn đề là do kiểu dáng mà Twitter Bootstrap thêm vào một đầu vào số có giá trị không hợp lệ.

Đây là một câu đố chứng minh rằng việc thêm stepthuộc tính làm cho nó hoạt động và cũng kiểm tra xem giá trị hiện tại có hợp lệ hay không:

• jsFiddle

TL; DR: Đặt stepthuộc tính thành giá trị dấu phẩy động, vì nó mặc định là 1.

LƯU Ý : Dấu phẩy không xác thực cho tôi, nhưng tôi nghi ngờ rằng nếu tôi đặt cài đặt ngôn ngữ / vùng của hệ điều hành của mình thành một nơi sử dụng dấu phẩy làm dấu tách thập phân, nó sẽ hoạt động. * lưu ý trong ghi chú *: đó không phải là trường hợp cài đặt ngôn ngữ / bàn phím hệ điều hành * Tiếng Đức * trong Ubuntu / Gnome 14.04.

Theo w3.org, thuộc tính giá trị của đầu vào số được định nghĩa là số dấu phẩy động . Cú pháp của số dấu phẩy động dường như chỉ chấp nhận dấu chấm dưới dạng dấu phân cách thập phân.

Tôi đã liệt kê một vài tùy chọn bên dưới có thể hữu ích cho bạn:

1. Sử dụng thuộc tính mẫu

Với thuộc tính mẫu, bạn có thể chỉ định định dạng được phép bằng biểu thức chính quy theo cách tương thích với HTML5. Ở đây bạn có thể chỉ định rằng ký tự dấu phẩy được cho phép và một thông báo phản hồi hữu ích nếu mẫu không thành công.

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

Lưu ý: Hỗ trợ nhiều trình duyệt khác nhau rất nhiều. Nó có thể hoàn chỉnh, một phần hoặc không tồn tại ..

2. Xác thực JavaScript

Bạn có thể cố gắng liên kết một cuộc gọi lại đơn giản để ví dụ sự kiện onchange (và / hoặc làm mờ ) sẽ thay thế dấu phẩy hoặc xác thực tất cả cùng nhau.

3. Vô hiệu hóa xác thực trình duyệt ##

Thứ ba, bạn có thể thử sử dụng thuộc tính formnovalidate trên các đầu vào số với mục đích vô hiệu hóa xác thực trình duyệt cho trường đó cùng nhau.

<input type="number" formnovalidate />

4. Kết hợp ..?

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

Việc sử dụng dấu phẩy hay dấu chấm cho dấu tách thập phân hoàn toàn tùy thuộc vào trình duyệt. Trình duyệt đưa ra quyết định dựa trên ngôn ngữ của hệ điều hành hoặc trình duyệt hoặc một số trình duyệt đưa ra gợi ý từ trang web. Tôi đã tạo một biểu đồ so sánh trình duyệt cho thấy các trình duyệt khác nhau hỗ trợ xử lý các phương thức bản địa hóa khác nhau như thế nào. Safari là trình duyệt duy nhất xử lý dấu phẩy và dấu chấm thay thế cho nhau.

Về cơ bản, bạn là một tác giả web không thể thực sự kiểm soát điều này. Một số công việc liên quan đến việc sử dụng hai trường đầu vào với số nguyên. Điều này cho phép mọi người dùng nhập dữ liệu như bạn mong đợi. Nó không đặc biệt gợi cảm, nhưng nó sẽ hoạt động trong mọi trường hợp cho tất cả người dùng.

Sử dụng valueAsNumberthay vì .val().

đầu vào . valueAsNumber [= value]

Trả về một số đại diện cho giá trị của điều khiển biểu mẫu, nếu có; nếu không, trả về null.
Có thể được đặt, để thay đổi giá trị.
Ném một ngoại lệ INVALID_STATE_ERR nếu điều khiển không dựa trên ngày hoặc thời gian cũng không phải là số.

sử dụng một loại văn bản nhưng buộc sự xuất hiện của bàn phím số

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

thẻ inputmode là giải pháp

Tôi chưa tìm thấy một giải pháp hoàn hảo nhưng cách tốt nhất tôi có thể làm là sử dụng type = "tel" và vô hiệu hóa xác thực html5 (formnovalidate):

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

Nếu người dùng đặt dấu phẩy, nó sẽ xuất ra dấu phẩy trong mọi trình duyệt hiện đại mà tôi đã thử (FF, IE, edge, opera, chrome, safari desktop, android chrome).

Vấn đề chính là:

• Người dùng di động sẽ thấy bàn phím điện thoại của họ có thể khác với bàn phím số.
• Thậm chí tệ hơn bàn phím điện thoại thậm chí có thể không có phím cho dấu phẩy.

Đối với trường hợp sử dụng của tôi, tôi chỉ phải:

• Hiển thị giá trị ban đầu bằng dấu phẩy (firefox loại bỏ giá trị cho loại = số)
• Không thất bại xác thực html5 (nếu có dấu phẩy)
• Có trường đọc chính xác như đầu vào (với dấu phẩy có thể)

Nếu bạn có một yêu cầu tương tự, điều này sẽ làm việc cho bạn.

Lưu ý: Tôi không thích sự hỗ trợ của thuộc tính mẫu. Formnovalidate dường như hoạt động tốt hơn nhiều.

Khi bạn gọi $("#my_input").val();nó trả về dưới dạng biến chuỗi. Vì vậy, sử dụng parseFloatvà parseIntđể chuyển đổi. Khi bạn sử dụng parseFloatmáy tính để bàn hoặc điện thoại ITSELF hiểu ý nghĩa của biến.

Và ngoài ra, bạn có thể chuyển đổi một chuỗi float thành chuỗi bằng cách sử dụng toFixedđối số đếm các chữ số như dưới đây:

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

Trình duyệt xuất hiện vẫn gặp sự cố (mặc dù Chrome và Firefox Nightly hoạt động tốt). Tôi có một cách tiếp cận khó khăn cho những người thực sự phải sử dụng một trường số (có thể vì những mũi tên nhỏ mà trường văn bản không có).

Giải pháp của tôi

Tôi đã thêm một keyup lý sự kiện vào đầu vào biểu mẫu và theo dõi trạng thái và đặt giá trị một khi nó trở lại hợp lệ.

Đoạn mã thuần túy 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>

Đoạn 9 góc

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

Đề nghị của tôi? Đừng sử dụng jQuery. Tôi đã có vấn đề tương tự như bạn. Tôi thấy rằng$('#my_input').val() luôn luôn trả lại một số kết quả kỳ lạ.

Cố gắng sử dụng document.getElementById('my_input').valueAsNumberthay vì $("#my_input").val();và sau đó, sử dụngNumber(your_value_retrieved) để cố gắng tạo Số. Nếu giá trị là NaN, bạn chắc chắn đó không phải là số.

Một điều cần thêm là khi bạn viết một số trên đầu vào, đầu vào thực sự sẽ chấp nhận hầu hết mọi ký tự (tôi có thể viết ký hiệu euro, đô la và tất cả các ký tự đặc biệt khác), vì vậy tốt nhất là lấy giá trị bằng cách sử dụng .valueAsNumberthay vì sử dụng jQuery.

Ồ, và BTW, cho phép người dùng của bạn thêm quốc tế hóa (nghĩa là: hỗ trợ dấu phẩy thay vì dấu chấm để tạo số thập phân). Chỉ cần để Number()đối tượng tạo ra một cái gì đó cho bạn và nó sẽ an toàn thập phân, có thể nói như vậy.

Âm thanh như bạn muốn sử dụng toLocaleString () trên các đầu vào số của bạn.

Xem https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString để biết cách sử dụng.

Bản địa hóa các số trong JS cũng được đề cập trong Quốc tế hóa (Định dạng số "num.toLocaleString ()") không hoạt động cho chrome