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

尚未有邦友留言

立即登入留言