cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<div class="container">

<br>
<h1 class="title is-4">imaskjs を使ったフォームサンプル</h1>
  
  

<div class="field has-addons">
  <div class="control">
    <input class="input" id="zip" type="text" placeholder="郵便番号フィールド">
    <small>* 七桁の数字のみ</small>
  </div>
  <div class="control">
    <a id="v_zip" class="button is-info">
      値を取得
    </a>
  </div>
</div>
  
  <div class="field has-addons">
  <div class="control">
    <input class="input" id="phone" type="text" placeholder="携帯番号フィールド">
    <small>* 11桁の携帯フォーマットのみ入力可</small>
  </div>
  <div class="control">
    <a id="v_phone" class="button is-primary">
      値を取得
    </a>
  </div>
</div>

  <div>
</div>
            
          
!
            
              var el = function(id) {
  return document.getElementById(id);
}

/* 郵便番号 */
// 郵便番号フォーマットを定義
var zipMask = {
  mask: "000-0000"
};
// imaskjsに郵便番号のフォーマットを適応
var zip = new IMask(el('zip'), zipMask);

$('#v_zip').click(function() {
  
  var val = zip.unmaskedValue;
  
  var res = val !== '' ? val : "! 郵便番号が入力されていません";
  alert("zip: " + res)
});

/* 携帯番号 */
// 携帯電話のフォーマット
var phoneMask = {
  mask: "{0}#{0}-0000-0000",
  definitions: {
    '#': /[7-9]/ 
  }
};
// 携帯電話フォーマットをimaskjsに適応
var cellularPhone = new IMask(el('phone'), phoneMask);

$('#v_phone').click(function() {
  
  var val = cellularPhone.unmaskedValue;
  
  var res = val !== '' ? val : "! 携帯番号が入力されていません";
  alert("phone: " + res)
});
            
          
!
999px
Loading ..................

Console