Cách khắc phục sự cố thường gặp với trình duyệt web Chrome, IE, Edge và Opera khi sử dụng phần tử đầu vào HTML5 với type = number bằng JQuery.

Bạn đang xem : số kiểu đầu vào jquery

Trong số nhiều tính năng tuyệt vời được giới thiệu với HTML5, có các kiểu mới được thêm vào cho & lt; input & gt; < / strong> các phần tử: đây là màu, ngày tháng, ngày giờ-địa phương, email, tháng, số, phạm vi, tìm kiếm, số điện thoại, thời gian, url, tuần. Nếu bạn tham gia vào thiết kế web, bạn chắc chắn biết cảm giác khó khăn như thế nào khi hỗ trợ đúng các loại này bằng cách thêm danh sách thả xuống, lịch nội tuyến và các tập lệnh xác thực phía máy khách khác để buộc người dùng chèn các loại giá trị này: kể từ hôm nay hầu hết các rắc rối đã biến mất nhờ các loại mới này, vì trình duyệt web sẽ giải quyết vấn đề đó với một tập hợp các điều khiển đẹp mắt (và được tiêu chuẩn hóa) được tích hợp sẵn.

Đáng ngạc nhiên là một trong những trường hợp đơn giản nhất – loại number – vẫn có một số vấn đề khó chịu nếu bạn cần sử dụng các giá trị thập phân. Theo thông số kỹ thuật W3C , bạn cũng cần thêm thuộc tính step để hỗ trợ điều đó. Ví dụ: nếu bạn muốn hỗ trợ hai số thập phân, bạn có thể làm như sau:

1

& lt; input

=

“number”

bước

=

“0,01”

& gt;

Đó là nó, phải không? Đáng buồn là không, trừ khi bạn muốn giới hạn đối tượng trang web của mình chỉ ở người dùng en-US (hoặc Mozilla Firefox ). Đó là bởi vì input type = “number” với các bước thập phân chỉ được hỗ trợ với dấu phân tách dot trong hầu hết các trình duyệt: ngoại lệ duy nhất đến từ Mozilla Firefox, cho phép dấu phẩy được sử dụng nếu HTML5 được bản địa hóa đúng cách – ví dụ: sử dụng

& lt; body

lang

=

“it”

& gt;

.

Đây là trạng thái hiện tại của vấn đề này (theo loại trình duyệt), như được hiển thị trong chuỗi GitHub này :

Đầu vào
Firefox
Trình duyệt Chrome
I E
Bờ rìa
Cuộc đi săn

123




123,45 (với

.

vùng đất)




123,45 (với

.

vùng đất)

123,45 (với

Xem Thêm  Tham gia chéo MySQL - ví dụ tham gia chéo mysql

,

vùng đất)

123,45 (với

,

vùng đất)




123.456,78

123,456,78

10e-1




Điều này làm tê liệt

& lt; input

type

=

“số”

& gt;

đến mức không thể sử dụng nó bất cứ lúc nào chúng tôi cần để hỗ trợ kịch bản quốc tế và / hoặc đa ngôn ngữ. Bất cứ khi nào bạn cần làm điều đó, điều tốt nhất bạn có thể làm là chuyển về trạng thái đơn giản

& lt; input

type

=

“text”

& gt;

và xác thực thông tin người dùng nhập bằng JavaScript.

Đây là một tập lệnh phù hợp mà bạn có thể sử dụng, dựa trên một cách lỏng lẻo từ chuỗi StackOverflow này :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30 < / p>

31

32

// xác thực phía máy khách đối với đầu vào số, có thể thay thế (các) dấu phân cách tùy chọn .

$

(

“input.number”

)

.

trên

(

“phím xuống”

,

function

(

e

)

{

< p class = "crayon-line" id = "urvanov-Cú pháp-highlighter-62b3d71b4aeab959959660-3">

// hàm cho phép phím và dấu phân cách thập phân

if

(

// phím xóa lùi, xóa, tab, thoát, enter, dấu phẩy và.

$

.

inArray

(

e

.

keyCode

, < / p>

[

46

,

8

,

9

,

27

,

13

,

110

,

188

,

< p class = "crayon-h">

190

]

)

! ==

< / p>

1

||

// Ctrl / cmd + A, Ctrl / cmd + C, Ctrl / cmd + X

(

$

.

inArray

(

e

.

keyCode

,

[

65

,

67

,

88

]

)

! ==

1

& amp; & amp;

(

e

.

ctrlKey

===

true

||

e

.

metaKey

===

true

)

)

||

// home, end, left, right

(

e

.

Mã khóa

& gt; =

35

& amp; & amp;

e

.

Mã khóa

& lt; =

39

)

< p class = "crayon-sy">)

{

/ *

// tùy chọn: thay dấu phẩy bằng dấu chấm trong thời gian thực (dành cho người dân địa phương ở Hoa Kỳ)

if (e.keyCode === 188) {

e.preventDefault ();

$ (this) .val ($ (this) .val () +”. “);

}

// tùy chọn: thay thế dấu thập phân (num pad) và dấu chấm bằng dấu phẩy trong thời gian thực (dành cho người dân địa phương ở Liên minh Châu Âu)

i f (e.keyCode === 110 || e.keyCode === 190) {

e.preventDefault ();

$ (This) .val ($ (this) .val () +”, “);

}

* /

return

;

}

// chặn bất kỳ không phải số nào

if

(

(

e

.

shiftKey

||

(

e

.

keyCode

& lt;

48

||

e

.

keyCode

& gt;

57

)

)

& amp; & amp;

(

e

.

Mã khóa

& lt;

96

||

e

.

Mã khóa

& gt;

105

)

)

{

e

.

PreventDefault

(

)

;

}

}

)

;

Đặt nó ở cuối mã HTML của bạn (hoặc bên trong

$

(

Xem Thêm  DATEADD (Transact-SQL) - Máy chủ SQL - datetime thêm ngày sql

function

(

)

{

}

)

gọi), sau đó chỉ định lớp số cho bất kỳ đầu vào nào bạn muốn xác thực theo cách này. Nếu muốn, bạn cũng có thể bỏ ghi chú các dòng tùy chọn để thay thế dấu phẩy bằng dấu chấm (hoặc ngược lại).

CẬP NHẬT : Tôi đã tạo JSFiddle bằng mã trên nếu bạn muốn kiểm tra trực tuyến.

Bây giờ là vậy: viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề số loại đầu vào jquery

JQuery 21 – Get and set positions of the elements

  • Tác giả: Ankpro Training
  • Ngày đăng: 2017-01-22
  • Đánh giá: 4 ⭐ ( 9403 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: get and set Positions:
    How to get and set Positions using jQuery:

    offset() : Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

    position() : Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

    width() : Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

    height() : Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

    innerWidth(): Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

    innerHeight() : Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

    outerWidth() : Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

    outerHeight() : Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.

    ankpro
    ankpro training
    Asp.net MVC
    C
    C sharp
    Bangalore
    Rajajinagar
    Selenium
    Coded UI
    Mobile automation testing
    Mobile testing
    JQuery
    JavaScript
    .Net
    Components of the .Net framework
    Hello World
    Literal
    Keywords
    Variable
    Data types
    Operators
    Branching
    Loops
    Arrays
    ArrayList
    Strings
    String Builder
    Structures
    Enums
    Functions
    Classes
    Inheritance
    Polymorphism
    Properties
    Indexers
    Events
    Nested Classes
    Delegates
    Anonymous methods
    Labda expressions
    Abstract classes
    Exception Handling
    Linq
    Interfaces
    Extension methods
    Anonymous types
    Generics
    Collections
    Garbage Collection
    Reflection
    Attributes
    Input and output statements
    Type casting
    Partial Methods
    Partial Classes
    Boxing and Unboxing
    Var vs Dynamic vs Object
    using Static.
    Auto property initializer.
    Dictionary Initializer.
    nameof Expression.
    New way for Exception filters.
    await in catch and finally block.
    Null – Conditional Operator.
    Expression – Bodied Methods
    Easily format strings – String interpolation
    Parameterless constructors in structs.
    Creating a custom exceptions class.

JQuery Ajax và kiến thức cơ bản

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 9426 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới Thiệu AJAX – “Asynchronous JavaScript and XML” – là một bộ công cụ cho phép load dữ liệu từ server mà không yêu cầu tải lại trang. Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt…

[Wiki] Thuật ngữ – Phân loại – Ký hiệu trong jQuery

  • Tác giả: maikhongquen.forumvi.com
  • Đánh giá: 4 ⭐ ( 7483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: http://devs.forumvi.com/t150-quote#966 jQuery viết bằng tiếng Anh, một số thuật ngữ và ký hiệu họ dùng cũng là rút gọn hoặc viết tắt bằng tiếng Anh nên không có

Tham khảo jQuery

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 3884 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm jQuery giúp bạn củng cố thêm kiến thức và hiểu rõ hơn những gì bạn đã học – Học Web Chuẩn

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 9135 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu Selector là gì? Tìm hiểu cú pháp selector trong jQuery, xử lý duyệt các phần tử trong kết quả trả về của selector trong jquery dành cho người mới.

JQuery Goodness và ASP.NET AJAX – Take II

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 8380 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vì vậy, rõ ràng tôi đang bị ám ảnh về việc đưa các tính năng jQuery vào các ứng dụng WebForm của mình. Tôi thực sự thích nhìn thấy những điều sau đây được thêm vào … Một bộ chọn mạnh mẽ…

jQuery là gì? Tổng quan và hướng dẫn sử dụng jQuery – Trung tâm hỗ trợ kỹ thuật

  • Tác giả: wiki.matbao.net
  • Đánh giá: 3 ⭐ ( 5900 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: jQuery là gì? jQuery là thư viện được viết từ JavaScript, giúp xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cột ALTER trong MySQL - cách cập nhật một cột trong mysql

By ads_php