Bản quyền [c] 2010 - 2022 Robin Herbots Được cấp phép theo giấy phép MIT [https. //mã nguồn mở. org/giấy phép/MIT]
Inputmask có giấy phép rất dễ dãi và điều này sẽ tiếp tục như vậy. Nhưng khi bạn sử dụng Inputmask trong môi trường thương mại, hãy thật trung thực để đóng góp một khoản nhỏ. Điều này sẽ được đánh giá rất cao
Inputmask là một thư viện javascript tạo mặt nạ đầu vào. Inputmask có thể chạy với vanilla javascript, jQuery và jqlite
Mặt nạ đầu vào giúp người dùng nhập dữ liệu bằng cách đảm bảo định dạng được xác định trước. Điều này có thể hữu ích cho ngày, số, số điện thoại,
Điểm nổi bật
- dễ sử dụng
- các bộ phận tùy chọn ở bất cứ đâu trong mặt nạ
- khả năng xác định bí danh che giấu sự phức tạp
- mặt nạ ngày / DateTime
- mặt nạ số
- nhiều cuộc gọi lại
- mặt nạ không tham lam
- nhiều tính năng có thể được bật/tắt/cấu hình theo tùy chọn
- hỗ trợ các thuộc tính chỉ đọc/bị vô hiệu hóa/dir="rtl"
- hỗ trợ [các] thuộc tính data-inputmask
- mặt nạ máy phát điện
- mặt nạ regex
- mặt nạ động
- mặt nạ sơ chế
- mặt nạ JIT
- định dạng/xác nhận giá trị không có phần tử đầu vào
- Hỗ trợ AMD/CommonJS
- phụ thuộcLibs. javascript vani, jQuery, jqlite
- phần tử html
Trang demo xem https. //robinherbot. github. io/Mặt nạ đầu vào/
Cảm ơn Jetbrains đã cung cấp giấy phép miễn phí cho Webstorm IDE tuyệt vời của họ
Cảm ơn Browserstack đã cung cấp giấy phép miễn phí để chúng tôi có thể tự động kiểm tra trên các trình duyệt và thiết bị khác nhau
Cài đặt
phụ thuộcLibs
Inputmask có thể chạy trên các thư viện javascript khác nhau. Bạn có thể chọn giữa
- mặt nạ. phụ thuộcLib [vani]
- mặt nạ. phụ thuộcLib. jquery
Classic web with tag
Bao gồm các tệp js mà bạn có thể tìm thấy trong thư mục
8Inputmask với jQuery là phụ thuộclib
Inputmask với vani phụ thuộc lib
Nếu bạn muốn tự động liên kết inputmask với các đầu vào được đánh dấu bằng data-inputmask-. các thuộc tính bạn cũng có thể muốn bao gồm inputmask. ràng buộc. js
gói web
Cài đặt gói
npm install inputmask --save
Cài đặt phiên bản beta mới nhấtnpm install inputmask@next --save
Trong các mô-đun của bạn
Nếu bạn muốn bao gồm Inputmask và tất cả các phần mở rộng
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
ES6
import Inputmask from "inputmask.es6.js";
Cách sử dụng
thông qua lớp Inputmask
________số 8
thông qua plugin jquery
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];
thông qua thuộc tính data-inputmask
0
Any option can also be passed through the use of a data attribute. Use data-inputmask-="value"
1
2
via element
Sử dụng phần tử input-mask trong mã HTML của bạn và đặt các tùy chọn làm thuộc tính
3
Các phần tử HTML được phép
00
01
02
03
04 [và tất cả những thứ khác được hỗ trợ bởi contenteditable]
05
- bất kỳ phần tử html nào [che giấu nội dung văn bản hoặc đặt giá trị mặt nạ bằng jQuery. giá trị]
Các loại đầu vào được phép được xác định trong tùy chọn supportsInputType. Cũng thấy []
Định nghĩa mặt nạ mặc định
06. con số
07. thứ tự chữ cái
08. chữ và số
Có nhiều định nghĩa hơn được xác định trong phần mở rộng.
Bạn có thể tìm thông tin trong các tệp js hoặc bằng cách khám phá thêm các tùy chọn.
Khi mặt nạ mới của bạn hoạt động lạ và thay thế một số ký tự tĩnh bằng mặt nạ, thì sẽ có một định nghĩa sử dụng ký tự làm biểu tượng. Để giải quyết điều này, bạn cần phải
các loại mặt nạ
mặt nạ tĩnh
Đây là những điều cơ bản của mặt nạ. Mặt nạ được xác định và sẽ không thay đổi trong quá trình nhập liệu
4
mặt nạ tùy chọn
Có thể xác định một số phần trong mặt nạ là tùy chọn. Điều này được thực hiện bằng cách sử dụng [ ]
Ví dụ
5
Mặt nạ này sẽ cho phép đầu vào như
09 hoặc
10
Đầu vào => 12123451234 mặt nạ => [12] 12345-1234 [hoàn tất kích hoạt]
Đầu vào => 121234-1234 mặt nạ => [12] 1234-1234 [hoàn tất kích hoạt]
Input => 1212341234 mask => [12] 12341-234_ [trigger incomplete]
bỏ quaPhần tùy chọnNhân vật
Ngoài ra, có một ký tự có thể định cấu hình khác được sử dụng để bỏ qua một phần tùy chọn trong mặt nạ
6
Đầu vào => 121234 1234 mặt nạ => [12] 1234-1234 [hoàn tất kích hoạt]
Khi
11 được đặt trong các tùy chọn [mặc định], mặt nạ sẽ xóa phần tùy chọn khi không được điền vào và điều này chỉ xảy ra trong trường hợp phần tùy chọn nằm ở cuối mặt nạ
Ví dụ, đưa ra
7
Trong khi trường có tiêu điểm và trống, người dùng sẽ thấy mặt nạ đầy đủ
12. Khi phần bắt buộc của mặt nạ được lấp đầy và trường mất tiêu điểm, người dùng sẽ thấy
13. Khi cả hai phần bắt buộc và tùy chọn của mặt nạ được điền và trường mất tiêu điểm, người dùng sẽ thấy
14
Mặt nạ tùy chọn với sai tham lam
Khi xác định một mặt nạ tùy chọn cùng với tham lam. tùy chọn sai, mặt nạ đầu vào sẽ hiển thị mặt nạ nhỏ nhất có thể làm đầu vào trước
8
Mặt nạ ban đầu được hiển thị sẽ là "_" thay vì "__-____"
mặt nạ năng động
Mặt nạ động có thể thay đổi trong quá trình nhập liệu. Để xác định một phần động, hãy sử dụng { }
{n} => n lặp lại {n. j} => n lần lặp lại, với j jitmasking {n,m} => từ n đến m lần lặp lại {n,m. j} => từ n đến m lặp lại, với j jitmasking
Cũng cho phép {+} và {*}. + bắt đầu từ 1 và * bắt đầu từ 0
9
Mặt nạ máy phát điện
Cú pháp máy phát điện giống như một câu lệnh OR. Mặt nạ có thể là một trong 3 lựa chọn được chỉ định trong máy phát điện
Để xác định máy phát điện, hãy sử dụng. Ví dụ. "một. 9" => a hoặc 9" [aaa]. [999]" => aaa hoặc 999 "[aaa. 999. 9AA]" => aaa hoặc 999 hoặc 9AA
"aaaa. 9999" => aaa a hoặc 9 999
Cũng đảm bảo đọc về tùy chọn
0
hoặc
1
sơ chế mặt nạ
Bạn có thể xác định mặt nạ như một chức năng có thể cho phép bạn xử lý trước mặt nạ kết quả. Ví dụ sắp xếp cho nhiều mặt nạ hoặc truy xuất định nghĩa mặt nạ động thông qua ajax. Quá trình tiền xử lý fn sẽ trả về định nghĩa mặt nạ hợp lệ
2
Mặt nạ JIT
Đắp mặt nạ đúng lúc. Với tùy chọn jitMasking, bạn có thể kích hoạt jit masking. Mặt nạ sẽ chỉ hiển thị đối với các ký tự do người dùng nhập. Mặc định. sai
Giá trị có thể đúng hoặc số ngưỡng hoặc sai
3
Xác định định nghĩa tùy chỉnh
Bạn có thể xác định các định nghĩa của riêng mình để sử dụng trong mặt nạ của mình.
Bắt đầu bằng cách chọn một biểu tượng mặt nạ.
trình xác nhận [chrs, maskset, pos,strict, opts]
Tiếp theo, xác định trình xác thực của bạn. Trình xác thực có thể là biểu thức chính quy hoặc hàm
Giá trị trả về của trình xác thực có thể là đúng, sai hoặc đối tượng lệnh
Tùy chọn của đối tượng lệnh
tư thế. vị trí chèn
c. ký tự để chèn
dấu mũ. vị trí của dấu mũ
gỡ bỏ. [các] vị trí để loại bỏ
- tư thế hoặc [pos1, pos2]
chèn. [các] vị trí để thêm
- { vị trí. vị trí chèn, c. ký tự để chèn, fromIsValid. đúng/sai, nghiêm ngặt. đúng sai }
- [{ vị trí. vị trí chèn, c. ký tự để chèn, fromIsValid. đúng/sai, nghiêm ngặt. đúng sai }, {. },. ]
fromIsValid & giá trị mặc định nghiêm ngặt là true
refreshFromBuffer
- đúng => làm mới validPositions từ bộ đệm hoàn chỉnh
- { bắt đầu. , chấm dứt. } => làm mới từ đầu đến cuối
rewritePosition. viết lại maskPos trong hàm isvalid
Xem
định nghĩaBiểu tượng
Khi bạn chèn hoặc xóa các ký tự, chúng chỉ bị dịch chuyển khi kiểu định nghĩa giống nhau. Hành vi này có thể được ghi đè bằng cách đưa ra một định nghĩaSymbol. [xem ví dụ x, y, z, có thể được sử dụng để tạo mặt nạ địa chỉ IP, việc xác thực sẽ khác, nhưng được phép thay đổi các ký tự giữa các định nghĩa]
4
giữ chỗ
Chỉ định một trình giữ chỗ cho một định nghĩa. Đây cũng có thể là một chức năng
không bắt buộc
Đánh dấu định nghĩa là tùy chọn
tĩnh
Đánh dấu định nghĩa là tĩnh
vỏ bọc [tùy chọn định nghĩa]
Chỉ định các tùy chọn viết hoa.
Các tùy chọn giống như
được tạo ra
Đánh dấu định nghĩa là đã tạo
Thiết lập mặc định
Các giá trị mặc định có thể được đặt như bên dưới
5
Nhưng nếu thuộc tính được xác định trong bí danh, bạn cần đặt thuộc tính đó cho định nghĩa bí danh. Đây cũng là tùy chọn plugin mặc định. Nếu các định nghĩa bí danh mở rộng trên các tùy chọn mặc định, bạn chỉ có thể ghi đè nó ở cấp độ bí danh
6
Tuy nhiên, cách ưu tiên để thay đổi thuộc tính cho một bí danh là tạo một bí danh mới kế thừa từ định nghĩa bí danh mặc định
7
Sau khi được xác định, bạn có thể gọi bí danh bằng
8
Tất cả các cuộc gọi lại được thực hiện dưới dạng tùy chọn. Điều này có nghĩa là bạn có thể đặt triển khai chung cho các cuộc gọi lại bằng cách đặt mặc định
9
phương pháp
mặt nạ [yếu tố]
Tạo mặt nạ cho đầu vào
npm install inputmask --save
0hoặc
npm install inputmask --save
1hoặc
npm install inputmask --save
2hoặc
npm install inputmask --save
3hoặc
npm install inputmask --save
4giá trị vạch trần
Nhận
15
npm install inputmask --save
5hoặc
npm install inputmask --save
6vạch trần giá trị
Vạch mặt một giá trị đã cho so với mặt nạ
npm install inputmask --save
7gỡ bỏ
Xóa
16
npm install inputmask --save
8hoặc
npm install inputmask --save
9hoặc
npm install inputmask@next --save
0getemptymask
trả về giá trị mặt nạ [trống] mặc định
npm install inputmask@next --save
1hasMaskedValue
Kiểm tra xem giá trị trả về có bị che hay không; . val fn để lấy giá trị
npm install inputmask@next --save
2hoàn tất
Xác minh xem giá trị hiện tại đã hoàn thành hay chưa
npm install inputmask@next --save
3lấy siêu dữ liệu
Siêu dữ liệu của mặt nạ thực tế được cung cấp trong định nghĩa mặt nạ có thể được lấy bằng cách gọi getmetadata. Nếu chỉ có một mặt nạ được cung cấp, định nghĩa mặt nạ sẽ được trả về bởi getmetadata
npm install inputmask@next --save
4đặt giá trị
Chức năng setvalue là đặt một giá trị cho inputmask giống như bạn sẽ làm với jQuery. val, NHƯNG nó sẽ luôn kích hoạt sự kiện nội bộ được sử dụng bởi inputmask, bất kể trường hợp nào. Điều này đặc biệt hữu ích khi sao chép mặt nạ đầu vào bằng jQuery. dòng vô tính. Nhân bản một inputmask không phải là một bản sao đầy đủ chức năng. Ở sự kiện đầu tiên [mouseenter, focus,. ] mặt nạ đầu vào có thể phát hiện nếu nó được nhân bản và có thể kích hoạt lại mặt nạ. Tuy nhiên khi thiết lập giá trị với jQuery. val không có sự kiện nào được kích hoạt trong trường hợp đó. Chức năng setvalue thực hiện điều này cho bạn
npm install inputmask@next --save
5tùy chọn[tùy chọn, bình thường]
Nhận hoặc đặt một tùy chọn trên một inputmask hiện có. Phương thức tùy chọn nhằm mục đích thêm các tùy chọn bổ sung như gọi lại, v.v. vào mặt nạ sau đó
Khi các tùy chọn bổ sung được đặt, mặt nạ sẽ tự động được áp dụng lại, trừ khi bạn trả lời đúng cho đối số mặt nạ
Đặt một tùy chọn
npm install inputmask@next --save
6npm install inputmask@next --save
7định dạng
Thay vì che một phần tử đầu vào, cũng có thể sử dụng mặt nạ đầu vào để định dạng các giá trị đã cho. Nghĩ về các giá trị định dạng để hiển thị trong jqGrid hoặc trên các phần tử khác rồi nhập
npm install inputmask@next --save
8isValid
Xác thực một giá trị nhất định đối với mặt nạ
npm install inputmask@next --save
9Tùy chọn
giữ chỗ
Thay đổi trình giữ chỗ mặt nạ. Mặc định. "_"
Thay vì "_", bạn có thể thay đổi mặt nạ ký tự không được điền theo ý muốn, đơn giản bằng cách thêm tùy chọn
17.
Ví dụ:
18 sẽ thay đổi chế độ tự động điền mặc định với các giá trị trống
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
0hoặc một trình giữ chỗ nhiều ký tự
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
1tùy chọn đánh dấu
Định nghĩa các ký hiệu được sử dụng để biểu thị một bộ phận tùy chọn trong mặt nạ
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
2định lượng
Định nghĩa các ký hiệu được sử dụng để biểu thị một bộ định lượng trong mặt nạ
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
3đánh dấu nhóm
Định nghĩa các ký hiệu được sử dụng để biểu thị một nhóm trong mặt nạ
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
4máy phát điện
Định nghĩa các ký hiệu được sử dụng để chỉ bộ phận máy phát điện trong mặt nạ
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
5thoát khỏi Char
Định nghĩa các ký hiệu được sử dụng để thoát một phần trong mặt nạ
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
6Nhìn thấy
mặt nạ
Mặt nạ để sử dụng
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
7biểu thức chính quy
Sử dụng biểu thức chính quy làm mặt nạ
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
8Khi sử dụng tốc ký, hãy lưu ý rằng bạn cần thoát kép hoặc sử dụng Chuỗi. raw với một chuỗi ký tự
var Inputmask = require['inputmask'];
//es6
import Inputmask from "inputmask";
9chưa hoàn thành
Thực hiện một chức năng khi mặt nạ được hoàn thành
import Inputmask from "inputmask.es6.js";
0onincomplete
Thực hiện một chức năng khi mặt nạ không đầy đủ. Thực thi khi mờ
import Inputmask from "inputmask.es6.js";
1oncleared
Thực hiện một chức năng khi mặt nạ bị xóa
import Inputmask from "inputmask.es6.js";
2nói lại
Chức năng lặp lại mặt nạ. Lặp lại định nghĩa mặt nạ x-lần
import Inputmask from "inputmask.es6.js";
3tham
Mặc định. false Chuyển đổi để phân bổ càng nhiều càng tốt hoặc ngược lại. Chức năng lặp lại không tham lam
import Inputmask from "inputmask.es6.js";
4Với tùy chọn không tham lam được đặt thành false, bạn có thể chỉ định * là lặp lại. Điều này làm cho một sự lặp lại vô tận
autoUnmask
Tự động hiển thị giá trị khi truy xuất.
Mặc định. sai.
Khi đặt tùy chọn này thành true, plugin cũng mong muốn giá trị ban đầu từ máy chủ được hiển thị
removeMaskOnSubmit
Gỡ mặt nạ trước khi gửi biểu mẫu.
Mặc định. sai
ClearMaskOnLostFocus
Xóa mặt nạ trống khi mờ hoặc khi không trống, xóa phần đuôi tùy chọn Mặc định. thật
import Inputmask from "inputmask.es6.js";
5chế độ chèn
Chuyển sang chèn hoặc ghi đè đầu vào.
Mặc định. thật.
Có thể thay đổi tùy chọn này bằng cách nhấn phím Chèn.
chènModeVisual
Hiển thị dấu mũ đã chọn khi insertmode = false
rõ ràngKhông đầy đủ
Xóa đầu vào không đầy đủ khi làm mờ
import Inputmask from "inputmask.es6.js";
6bí danh
định nghĩa bí danh
Với bí danh, bạn có thể xác định định nghĩa mặt nạ phức tạp và gọi nó bằng cách sử dụng tên bí danh. Vì vậy, điều này chủ yếu là để đơn giản hóa việc sử dụng mặt nạ của bạn. Một số bí danh được tìm thấy trong các tiện ích mở rộng là email, tiền tệ, số thập phân, số nguyên, ngày, DateTime, dd/mm/yyyy, v.v.
Trước tiên, bạn phải tạo một định nghĩa bí danh. Định nghĩa bí danh có thể chứa các tùy chọn cho mặt nạ, định nghĩa tùy chỉnh, mặt nạ sẽ sử dụng, v.v.
Khi bạn chuyển vào một bí danh, bí danh đó sẽ được giải quyết trước tiên và sau đó các tùy chọn khác sẽ được áp dụng. Vì vậy, bạn có thể gọi một bí danh và chuyển một mặt nạ khác để áp dụng cho bí danh. Điều này cũng có nghĩa là bạn có thể viết bí danh "kế thừa" từ bí danh khác
Một số ví dụ có thể được tìm thấy trong jquery. mặt nạ. xxx. phần mở rộng. js
sử dụng
import Inputmask from "inputmask.es6.js";
7hoặc
import Inputmask from "inputmask.es6.js";
8Bạn cũng có thể gọi một bí danh và mở rộng nó với một số tùy chọn khác
import Inputmask from "inputmask.es6.js";
9hoặc
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];0
bí danh
Bí danh để sử dụng
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];1
onKeyDown
Gọi lại để triển khai tự động hoàn thành trên một số khóa nhất định chẳng hạn
Đối số của hàm. sự kiện, bộ đệm, caretPos, opts
Trả về hàm.
on BeforeMask
Thực thi trước khi che dấu giá trị ban đầu để cho phép tiền xử lý giá trị ban đầu
Đối số của hàm. initialValue, opts
Trả về hàm. giá trị đã xử lý
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];2
on BeforePaste
Cuộc gọi lại này cho phép xử lý trước giá trị đã dán trước khi thực sự xử lý giá trị để tạo mặt nạ. Điều này có thể hữu ích để loại bỏ một số ký tự trước khi xử lý
Đối số của hàm. pasteValue, opts
Trả về hàm. giá trị đã xử lý
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];3
Bạn cũng có thể tắt tính năng dán giá trị bằng cách trả về false trong lệnh gọi onB BeforePaste
Mặc định. Gọi onB BeforeMask
on BeforeWrite
Thực thi trước khi ghi vào phần tử bị che
Sử dụng điều này để thực hiện một số xử lý bổ sung của đầu vào. Điều này có thể hữu ích khi triển khai bí danh, ví dụ:. bí danh thập phân, tự động điền các chữ số khi rời khỏi trường nhập liệu
Đối số của hàm. sự kiện, bộ đệm, caretPos, opts
Trả về hàm. đối tượng lệnh [xem ]
onUnMask
Thực thi sau khi vạch mặt để cho phép xử lý hậu kỳ giá trị bị vạch mặt
Đối số của hàm. maskedValue, unmaskedValue
Hàm trả về. giá trị đã xử lý
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];4
showMaskOnFocus
Hiển thị mặt nạ khi đầu vào được lấy tiêu điểm. [mặc định = đúng]
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];5
Để đảm bảo không có mặt nạ nào hiển thị trên tiêu điểm, hãy đặt showMaskOnHover thành false. Nếu không, di chuột bằng chuột sẽ đặt mặt nạ và sẽ tiếp tục được lấy nét
showMaskOnHover
Hiển thị mặt nạ khi di chuột. [mặc định = đúng]
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];6
onKeyValidation
Chức năng gọi lại được thực thi trên mọi keyvalidation với khóa, kết quả là tham số
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];7
bỏ quaPhần tùy chọnNhân vật
đầu vào số
Hướng nhập số. Giữ dấu mũ ở cuối
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];8
căn phải
Căn chỉnh đầu vào sang phải
Bằng cách đặt rightAlign, bạn có thể chỉ định căn phải mặt nạ đầu vào. Điều này chỉ được áp dụng khi kết hợp tùy chọn numericInput hoặc thuộc tính dir. Mặc định là đúng
var selector = document.getElementById["selector"]; var im = new Inputmask["99-9999999"]; im.mask[selector]; //or Inputmask[{"mask": "[999] 999-9999", .. other_options, ...}].mask[selector]; Inputmask["9-a{1,3}9{1,3}"].mask[selector]; Inputmask["9", { repeat: 10 }].mask[selector]; Inputmask[{ regex: "\\d*" }].mask[selector]; Inputmask[{ regex: String.raw`\d*` }].mask[selector];9
hoàn tácOnEscape
Thực hiện thao tác thoát giống như hoàn tác. [ctrl-Z]
Nhấn thoát sẽ hoàn nguyên giá trị về giá trị trước tiêu điểm.
Mặc định. đúng
radixPoint [số]
Xác định cơ số [dấu tách thập phân]
Mặc định. ""
groupSeparator [số]
Xác định dấu tách nhóm
Mặc định. ""
giữ tĩnh
Mặc định. null [~false] Sử dụng kết hợp với cú pháp máy phát điện Cố gắng giữ mặt nạ tĩnh trong khi gõ. Các quyết định thay đổi mặt nạ sẽ bị hoãn lại nếu có thể
Ví dụ. $[bộ chọn]. mặt nạ đầu vào [{ mặt nạ. ["+55-99-9999-9999", "+55-99-99999-9999", ], keepStatic. thật }];
gõ 1212345123 => kết quả là +55-12-1234-5123 gõ thêm 4 => chuyển sang +55-12-12345-1234
Khi tùy chọn này không được đặt, nó sẽ mặc định là false.
Ngoại trừ.
- đối với nhiều mặt nạ, nó sẽ mặc định là đúng
- khi thay đổi đầu tiên ngắn hơn lần thay đổi tiếp theo, nó cũng sẽ mặc định là đúng
- Ví dụ. [9. 999], [99]. [aaaa]
vị tríCaretOnTab
Khi được bật, vị trí dấu mũ được đặt sau vị trí hợp lệ mới nhất trên TAB Mặc định. thật
tabThông qua
Cho phép lập tab qua các phần khác nhau của trường ẩn.
Mặc định. sai
các định nghĩa
Chuyển các định nghĩa tùy chỉnh trực tiếp trong các tùy chọn
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];0
hoàn tất
Với lệnh gọi [hook] này, bạn có thể ghi đè cài đặt mặc định của hàm isComplete.
Args => bộ đệm, opts Return => true. sai
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];1
postValidation
Hook to postXác thực kết quả từ isValid. Hữu ích để xác thực toàn bộ mục nhập. Args => bộ đệm, vị trí, c, kết quả hiện tại, opts, maskset, nghiêm ngặt, fromCheckval
Return => true. sai. đối tượng lệnh
xác nhận trước
Móc để xác thực trước đầu vào. Hữu ích để xác thực bất kể định nghĩa. Args => buffer, pos, char, isSelection, opts, maskset, caretPos,strict => return true/false/command object Khi trả về true, xác thực bình thường sẽ bắt đầu, nếu không, nó sẽ bị bỏ qua
Khi trả về một đối tượng lệnh, các hành động được thực thi và quá trình xác thực tiếp theo bị dừng.
Nếu bạn muốn tiếp tục xác thực thêm, bạn cần thêm hành động rewritePosition.
định nghĩa tĩnhBiểu tượng
Tùy chọn staticDefinitionSymbol được sử dụng để chỉ ra rằng các mục nhập tĩnh trong mặt nạ có thể khớp với một định nghĩa nhất định. Đặc biệt hữu ích với máy phát điện xoay chiều để phần tử tĩnh trong mặt nạ có thể khớp với một máy phát điện khác
Trong ví dụ bên dưới, chúng tôi đánh dấu các khoảng trắng là có thể khớp với định nghĩa "i". Bằng cách đó, mặt nạ có thể thay thế thành mặt nạ thứ hai ngay cả khi chúng ta đã gõ "12 3"
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];2
vô giá trị
Không trả lại gì khi người dùng chưa nhập gì. Mặc định. thật
noValuePatching
Vô hiệu hóa bản vá thuộc tính giá trị Mặc định. sai
vị tríCaretOnClick
Định vị dấu mũ khi nhấp chuột
Tùy chọn
- không ai
- lvp [dựa trên vị trí hợp lệ cuối cùng [mặc định]
- radixFocus [định vị dấu mũ thành điểm radix khi nhấp lần đầu]
- chọn [chọn toàn bộ đầu vào]
- bỏ qua [bỏ qua nhấp chuột và tiếp tục mặt nạ]
Mặc định. "lvp"
vỏ bọc
Áp dụng vỏ ở cấp độ mặt nạ. Tùy chọn. null, "upper", "lower" hoặc "title" hoặc gọi lại args => elem, test, pos, validPositions trả về charValue
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];3
Mặc định. vô giá trị
Chế độ đầu vào
Mặc định. "văn bản"
Chế độ đầu vào gợi ý loại dữ liệu mà người dùng có thể nhập vào khi chỉnh sửa phần tử hoặc nội dung của phần tử.
https. // nhà phát triển. mozilla. org/en-US/docs/Web/HTML/Global_attributes/inputmode
nhập dữ liệuthuộc tính
Chỉ định sử dụng các thuộc tính data-inputmask hoặc bỏ qua chúng
Nếu bạn không sử dụng thuộc tính dữ liệu, bạn có thể tắt tính năng nhập bằng cách chỉ định importDataAttributes. sai
Mặc định. thật
thay đổi vị trí
Thay đổi hành vi của việc dịch chuyển char khi nhập hoặc xóa
Trong một số trường hợp, việc thay đổi các mục hoặc xóa mặt nạ sẽ hạn chế hơn.
Ví dụ. mặt nạ ngày. Chuyển tháng sang ngày chẳng có ý nghĩa gì
Mặc định. thật
true = dịch chuyển trên đối sánh "def" false = dịch chuyển trên đối sánh "nativeDef"
sử dụngPrototypeDefinitions
Sử dụng các định nghĩa được xác định mặc định từ nguyên mẫu
Mặc định. thật
xác thực Hết thời gian sự kiện
Đã đến lúc hiển thị lỗi xác thực html5 khi gửi biểu mẫu
Mặc định. 3000
vật thay thế
Xác định ký tự thay thế
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];4
Mặc định. {}
Tổng quan
đặt một giá trị và áp dụng mặt nạ
điều này có thể được thực hiện với jquery truyền thống. val [tất cả các trình duyệt] hoặc thuộc tính giá trị JavaScript cho các trình duyệt triển khai lookupGetter hoặc getOwnPropertyDescriptor
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];5
với autoUnmaskoption, bạn có thể thay đổi giá trị trả lại của $. fn. val [hoặc thuộc tính giá trị] thành unmaskedvalue hoặc maskedvalue
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];6
thoát khỏi ký tự mặt nạ đặc biệt
Nếu bạn muốn phần tử mặt nạ xuất hiện dưới dạng phần tử tĩnh, bạn có thể thoát chúng bằng cách \
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];7
Ví dụ bổ sung xem #2251
mặt nạ đầu vào vỏ tự động
Bạn có thể xác định trong một định nghĩa để tự động áp dụng một số cách viết hoa cho mục nhập trong đầu vào bằng cách đưa ra cách viết hoa.
Vỏ có thể là null, "upper", "lower" hoặc "title".
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];8
Bao gồm jquery. mặt nạ. phần mở rộng. js để sử dụng định nghĩa A và #
$[document].ready[function[]{ $[selector].inputmask["99-9999999"]; //static mask $[selector].inputmask[{"mask": "[999] 999-9999"}]; //specifying options $[selector].inputmask["9-a{1,3}9{1,3}"]; //mask with dynamic syntax }];9
Tùy chọn đánh dấu được hỗ trợ
thuộc tính RTL
0thuộc tính chỉ đọc
1thuộc tính bị vô hiệu hóa
2thuộc tính độ dài tối đa
3thuộc tính data-inputmask
Bạn cũng có thể áp dụng một inputmask bằng cách sử dụng thuộc tính data-inputmask. Trong thuộc tính, bạn chỉ định các tùy chọn mong muốn cho inputmask. Điều này được phân tích cú pháp với $. parseJSON [tại thời điểm này], vì vậy hãy đảm bảo sử dụng chuỗi JSON được định dạng tốt mà không có {}
4
5data-inputmask- attribute
Tất cả các tùy chọn cũng có thể được chuyển qua thuộc tính dữ liệu
6
5jQuery. dòng vô tính
Khi sao chép một inputmask, inputmask sẽ kích hoạt lại trong sự kiện đầu tiên [mouseenter, focus,. ] xảy ra với đầu vào. Nếu bạn muốn đặt một giá trị trên mặt nạ đầu vào được nhân bản và bạn muốn trực tiếp kích hoạt lại mặt nạ, bạn phải sử dụng $[input]. inputmask["giá trị đặt", giá trị]
Đảm bảo vượt qua true trong jQuery. sao chép fn để sao chép dữ liệu và sự kiện và sử dụng jQuery làm phụ thuộcLib [https. //api. jquery. com/bản sao/]