カスタムキーパッド

by kawasima

HTML

<script src="https://rawgit.com/kbwood/keypad/2.0.1/jquery.plugin.min.js"></script>
<script src="https://rawgit.com/kbwood/keypad/2.0.1/jquery.keypad.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kbwood/keypad/2.0.1/jquery.keypad.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.1.7/semantic.min.css">
<form class="ui form">
  <div class="field">
    <label for="furigana">ﾌﾘｶﾞﾅ</label>
    <input id="furigana" />
  </div>

  <div class="field">
    <label for="postal">郵便番号</label>
    <input id="postal" />
  </div>
  
 <div class="field">
    <label for="passcode">暗証番号</label>
    <input id="passcode" type="password"/>
  </div>
  
  <div class="field">
    <label for="company-name">社名</label>
    <input id="company-name" name="company_name" />

  </div>

  <div class="field">
    <label for="excuse-for-being-late">遅刻理由</label>
    <input id="excuse-for-being-late" />

  </div>
</form>

<br/>
<br/>
<br/>
<br/>
<br/>

CSS

.excuse-keypad button {
  width: 8em;
}

JavaScript

$("#furigana").keypad({
  layout: [
  	'ｱｶｻﾀﾅﾊﾏﾔﾗﾜｧｬﾞ',
    'ｲｷｼﾁﾆﾋﾐ'+ $.keypad.SPACE + 'ﾘ' + $.keypad.SPACE + 'ｨ' + $.keypad.SPACE + 'ﾟ',
    'ｳｸｽﾂﾇﾌﾑﾕﾙｦｩﾕｰ',
    'ｴｹｾﾃﾈﾍﾒ'+ $.keypad.SPACE + 'ﾚ' + $.keypad.SPACE + 'ｪ' + $.keypad.SPACE + '･',
    'ｵｺｿﾄﾉﾎﾓﾖﾛﾝｫｮｯ'
  ],
  keypadOnly: false
});

$("#postal").keypad({
  layout: ['789','456','123','-0'+$.keypad.BACK],
  keypadOnly: false
}).keypad('option', 'backText', '⌫');

$("#passcode").keypad({
  randomiseNumeric: true
});

$("#company-name").keypad({
  separator: '|',
  layout: ['㈱|㈲'],
  keypadOnly: false
});

$("#excuse-for-being-late").keypad({
  separator: '|',
  layout: ['電車遅延|寝坊', '体調不良|ギックリ腰'],
  keypadClass: "excuse-keypad",
  keypadOnly: false
});