Mặt nạ đầu vào html

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

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

8

Inputmask với jQuery là phụ thuộclib

<script src="jquery.js">script>
<script src="dist/jquery.inputmask.js">script>

Inputmask với vani phụ thuộc lib

<script src="dist/inputmask.js">script>

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

<script src="dist/bindings/inputmask.binding.js">script>

gói web

Cài đặt gói

npm install inputmask --save

Cài đặt phiên bản beta mới nhất

npm 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

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

<script src="dist/inputmask.js">script>

0

Any option can also be passed through the use of a data attribute. Use data-inputmask-="value"

<script src="dist/inputmask.js">script>

1

<script src="dist/inputmask.js">script>

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

<script src="dist/inputmask.js">script>

3

Các phần tử HTML được phép

• <input data-inputmask="'alias': 'datetime'" />
  <input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
  <input data-inputmask="'mask': '99-9999999'" />

  9

• <script src="dist/inputmask.js">script>

  00

• <script src="dist/inputmask.js">script>

  01

• <script src="dist/inputmask.js">script>

  02

• <script src="dist/inputmask.js">script>

  03

• <script src="dist/inputmask.js">script>

  04 (và tất cả những thứ khác được hỗ trợ bởi contenteditable)

• <script src="dist/inputmask.js">script>

  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

• <script src="dist/inputmask.js">script>

  06. con số

• <script src="dist/inputmask.js">script>

  07. thứ tự chữ cái

• <script src="dist/inputmask.js">script>

  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.

Ghi chú

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

<script src="dist/inputmask.js">script>

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ụ

<script src="dist/inputmask.js">script>

5

Mặt nạ này sẽ cho phép đầu vào như

<script src="dist/inputmask.js">script>

09 hoặc

<script src="dist/inputmask.js">script>

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ạ

<script src="dist/inputmask.js">script>

6

Đầu vào => 121234 1234 mặt nạ => (12) 1234-1234 (hoàn tất kích hoạt)

Khi

<script src="dist/inputmask.js">script>

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

<script src="dist/inputmask.js">script>

7

Trong khi trường có tiêu điểm và trống, người dùng sẽ thấy mặt nạ đầy đủ

<script src="dist/inputmask.js">script>

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

<script src="dist/inputmask.js">script>

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

<script src="dist/inputmask.js">script>

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

<script src="dist/inputmask.js">script>

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

<script src="dist/inputmask.js">script>

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

<script src="dist/bindings/inputmask.binding.js">script>

0

hoặc

<script src="dist/bindings/inputmask.binding.js">script>

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ệ

<script src="dist/bindings/inputmask.binding.js">script>

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

<script src="dist/bindings/inputmask.binding.js">script>

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)

<script src="dist/bindings/inputmask.binding.js">script>

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

<script src="dist/bindings/inputmask.binding.js">script>

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

<script src="dist/bindings/inputmask.binding.js">script>

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

<script src="dist/bindings/inputmask.binding.js">script>

7

Sau khi được xác định, bạn có thể gọi bí danh bằng

<script src="dist/bindings/inputmask.binding.js">script>

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

<script src="dist/bindings/inputmask.binding.js">script>

9

phương pháp

mặt nạ (yếu tố)

Tạo mặt nạ cho đầu vào

npm install inputmask --save

0

hoặc

npm install inputmask --save

1

hoặc

npm install inputmask --save

2

hoặc

npm install inputmask --save

3

hoặc

npm install inputmask --save

4

giá trị vạch trần

Nhận

<script src="dist/inputmask.js">script>

15

npm install inputmask --save

5

hoặc

npm install inputmask --save

6

vạch trần giá trị

Vạch mặt một giá trị đã cho so với mặt nạ

npm install inputmask --save

7

gỡ bỏ

Xóa

<script src="dist/inputmask.js">script>

16

npm install inputmask --save

8

hoặc

npm install inputmask --save

9

hoặc

npm install inputmask@next --save

0

getemptymask

trả về giá trị mặt nạ (trống) mặc định

npm install inputmask@next --save

1

hasMaskedValue

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

2

hoà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

3

lấ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

5

tù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

6

npm 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

8

isValid

Xác thực một giá trị nhất định đối với mặt nạ

npm install inputmask@next --save

9

Tù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

<script src="dist/inputmask.js">script>

17.
Ví dụ:

<script src="dist/inputmask.js">script>

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

0

hoặc một trình giữ chỗ nhiều ký tự

var Inputmask = require('inputmask');

//es6
import Inputmask from "inputmask";

1

tù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";

4

má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";

5

thoá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";

6

Nhìn thấy

mặt nạ

Mặt nạ để sử dụng

var Inputmask = require('inputmask');

//es6
import Inputmask from "inputmask";

7

biể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";

8

Khi 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";

9

chư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";

0

onincomplete

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

1

oncleared

Thực hiện một chức năng khi mặt nạ bị xóa

import Inputmask from "inputmask.es6.js";

2

nó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";

3

tham

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

4

Vớ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";

5

chế độ 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";

6

bí 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";

7

hoặc

import Inputmask from "inputmask.es6.js";

8

Bạ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";

9

hoặ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

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

0

thuộc tính chỉ đọc

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

1

thuộc tính bị vô hiệu hóa

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

2

thuộc tính độ dài tối đa

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

3

thuộ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ó {}

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

4

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

5

data-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

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

6

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

5

jQuery. 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/)

Dữ liệu Inputmask là gì?

Làm cách nào để che dấu đầu vào trong JavaScript?

Có bao nhiêu phần trong một mặt nạ đầu vào?

Sự khác biệt giữa mặt nạ đầu vào và định dạng là gì?