iT邦幫忙

2018 iT 邦幫忙鐵人賽
3
Modern Web

30天學習30套前端技術(2018年)系列 第 59

[十分鐘學習] Cleave.js - 欄位格式化工具

example1

各式化表單欄位的內容

GitHub Star: 7,900
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE9+
RWD: 不支援(可運作)
License: Apache License 2.0


《安裝》

  • CDN

    <!-- Cleave.js v1.1.1 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.1.1/cleave.min.js"></script>
    <!-- Cleave.js 台灣電話號碼格式化 v1.1.1 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.1.1/addons/cleave-phone.tw.js"></script>
    
  • npm

    $ npm install --save cleave.js
    

《範例》

  • 電話、日期、信用卡格式化

    <b>Phone</b>
    <br />
    <input type="tel" class="input-phone" />
    <br />
    <b>Date</b>
    <br />
    <input type="tel" class="input-date" />
    <br />
    <b>Card<small id="type"></small></b>
    <br />
    <input type="tel" class="input-card" />
    <script>
    	var cleave = new Cleave( ".input-phone", {
    		// 參數設定[註1]
    		phone: true, // 電話模式
    		phoneRegionCode: "tw"
    	});
    
    	var cleave = new Cleave( ".input-date", {
    		date: true, // 日期模式
    		datePattern: [ "Y", "m", "d" ] // 日期格式
    	});
    
    	var cleave = new Cleave( ".input-card", {
    		creditCard: true,, // 信用卡模式
    		onCreditCardTypeChanged: function ( type )
    		{
    			// 當欄位值異動時,則啟動此函式
    			document.getElementById( "type" ).innerHTML = type;
    		}
    	});
    </script>
    

    [註1]

    屬性 描述
    phone 電話模式
    date 日期模式
    datePattern 日期格式
    creditCard 信用卡模式
    onCreditCardTypeChanged(【信用卡種類】) 當欄位值異動時,則啟動此函式

《延伸》

  1. Cleave.js - Format input text content when you are typing
  2. nosir/cleave.js: Format input text content when you are typing...

上一篇
[十分鐘學習] datedropper - 活潑風格日期選擇器
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言