3月 2021

Home › Archives for 3月 2021

2021/03/19

プログラムから C:\Windows\System32 にアクセスできない

jQuery Keypad を使ってみた

ダウンロード方法や使い方は以下で簡単に説明されていました。    - https://qiita.com/solabito331/items/f06d613c166e2bed2839  ## 表示/非表示用のボタンを用意    デフォルトではフォーカスした際に jQuery Keypad が表示されますが、キーボードで入力したい人にとっては邪魔だと思うので、jQuery Keypad 表示用のボタンを用意し、必要な人だけが表示できるようにしてみました。  具体的には、`showOn` を空文字にし、表示ボタンを押したときに表示するようにしています。   また、表示ボタンを連打するとテンキーが表示されたまま閉じれなくなってしまったので、ボタンの連打対策だけしておきました。    以下サンプルコードです。  ```html <input id="inputKeypad" type="text"><button type="button" onclick="showKeypad">表示</button>```  ```js $('#inputKeypad').keypad({     showOn: '',     showAnime: 'blind',     duration: 'fast',     keypadOnly: false, }); ```  ```js var keypadFlag = false;  function showKeypad(){ 	if (!keypadFlag) { 	    keypadFlag = true; 	    // ボタン連打対策として、一定時間後にフラグを落とす 	    setTimeout(function(){ 	    	keypadFlag = false; 	    }, 500); 	 	    if ($(".keypad-popup").css('display') == 'block') { 	        // 表示されている場合の処理 	        // ※フォーカスが外れた時点で非表示になるので、明示的に非表示にしなくてもよい？ 	        //$('#inputKeypad').keypad('hide') // Hide the keypad 	    } else { 	        // 非表示の場合の処理 	        $('#inputKeypad').keypad('show') // Show the keypad 	    } 	} } ```  ## type="number" への対応  jQuery Keypad は `type="number"` の `input` には対応しておらず、キーを押したときの入力内容が思っていたような動作になりません。    そこで、`0～9` `+` `-` のボタンを独自で定義して無理矢理対応させました。  ```js // keypad は type="number" の input に対応していないため、数値ボタンをカスタムで追加して無理矢理対応する var customNumberKeys = [     ['ZERO', 'zero', 0],     ['ONE', 'one', 1],     ['TWO', 'two', 2],     ['THREE', 'three', 3],     ['FOUR', 'four', 4],     ['FIVE', 'five', 5],     ['SIX', 'six', 6],     ['SEVEN', 'seven', 7],     ['EIGHT', 'eight', 8],     ['NINE', 'nine', 9] ]; customNumberKeys.forEach(customNumberKey => {     $.keypad.addKeyDef(customNumberKey[0], customNumberKey[1], function (inst) {         this.val(this.val() + String(customNumberKey[2])).focus();     }); }); $.keypad.addKeyDef('MINUS', 'minus', function (inst) {     let val = Number(this.val())     if (val > 0) {         this.val(val * -1).focus();     } }); $.keypad.addKeyDef('PLUS', 'plus', function (inst) {     let val = Number(this.val())     if (val < 0) {         this.val(val * -1).focus();     } }); $('#inputKeypad').keypad({     showOn: '',     showAnime: '',     duration: 'fast',     keypadOnly: false,     closeText: '閉じる',     closeStatus: '',     clearText: 'クリア',     clearStatus: '',     zeroText: '0',     zeroStatus: '',     oneText: '1',     oneStatus: '',     twoText: '2',     twoStatus: '',     threeText: '3',     threeStatus: '',     fourText: '4',     fourStatus: '',     fiveText: '5',     fiveStatus: '',     sixText: '6',     sixStatus: '',     sevenText: '7',     sevenStatus: '',     eightText: '8',     eightStatus: '',     nineText: '9',     nineStatus: '',     minusText: '-',     minusStatus: '',     plusText: '+',     plusStatus: '',     layout: [         $.keypad.SEVEN + $.keypad.EIGHT + $.keypad.NINE + $.keypad.CLOSE,         $.keypad.FOUR + $.keypad.FIVE + $.keypad.SIX + $.keypad.CLEAR,         $.keypad.ONE + $.keypad.TWO + $.keypad.THREE,         $.keypad.MINUS + $.keypad.ZERO + $.keypad.PLUS     ], }); ``` <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Rol_o3S0C_JnmWrCmGp_1bbtO6rwL84Seu2Qv7yuRIBL2wR4Oo053Pym_tiQFpNzrlsYIBrsQTk8uXNQiRT-owVF-R6XCB8z8S7-pCxzNQsVR1JS-AEY_78FcEQiu5A1hEBL2U4_NSs/s0/offset.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="193" data-original-width="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Rol_o3S0C_JnmWrCmGp_1bbtO6rwL84Seu2Qv7yuRIBL2wR4Oo053Pym_tiQFpNzrlsYIBrsQTk8uXNQiRT-owVF-R6XCB8z8S7-pCxzNQsVR1JS-AEY_78FcEQiu5A1hEBL2U4_NSs/s0/offset.png"/></a></div> ※デザインは変更しています（後述）    ## デザインの調整    デフォルトのデザインがちょっとダサいので、Bootstrap に合わせてちょっとだけ修正しました。    ```css /* キーパッド */ .keypad-popup {     /* 線が太くて濃くてダサいので、bootstrap に合わせる */     border: 1px solid #dee2e6; } .keypad-special, .keypad-key {     /* 線が太くて濃くてダサいので、bootstrap に合わせる */     border: 1px solid #dee2e6;     /* border を細くしたので、ちょっとだけ広げる */     padding: 4px; } .keypad-close {     /* bootstrap の success に合わせる */     background-color: #28a745; } .keypad-clear {     /* bootstrap の danger に合わせる */     background-color: #dc3545; } .keypad-back {     /* bootstrap の primary に合わせる */     background-color: #007bff; } .keypad-shift {     /* bootstrap の info に合わせる */     background-color: #17a2b8; } .keypad-spacebar {     /*デフォルトは 13.25em だけど、keypad-tab を 2em 大きくしたので、その分小さくする */     width: 11.25em; } .keypad-tab {     /*デフォルトは 2em だけど小さいので大きくする*/     width: 4em; } /* キーパッド（独自追加分） */ .keypad-zero, .keypad-one, .keypad-two, .keypad-three, .keypad-four, .keypad-five, .keypad-six, .keypad-seven, .keypad-eight, .keypad-nine, .keypad-ten, .keypad-plus, .keypad-minus {     /* keypad-key に合わせる */     width: 2em; } ```  <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMRUaDNWZSeE7rX-kdzqhqhBOMH3tTjDBVWvwImRaTp6sSBhIqxUJvhi15Xc79zrVx80s73H3omux6RiVFjMREFZxHr0yBRXjiXfjcyfSVzN1IAp3_0vdAOQ_IpZr_tdFALNYnpgtZL_Y/s510/query.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="267" data-original-width="510" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMRUaDNWZSeE7rX-kdzqhqhBOMH3tTjDBVWvwImRaTp6sSBhIqxUJvhi15Xc79zrVx80s73H3omux6RiVFjMREFZxHr0yBRXjiXfjcyfSVzN1IAp3_0vdAOQ_IpZr_tdFALNYnpgtZL_Y/s320/query.png"/></a></div>  ## vue.js で v-model と共存させる  私は部分的に vue.js を使っていますが、jQuery Keypad で入力した値が `v-model` でバインディングした変数に反映されていませんでした。   どうやら、この手の入力補助 UI を使う場合、`input` イベントを発火させないといけないようです。    とりあえず jQuery Keypad の `onClose` でイベントを発火するようにしたら上手くいきました。  ```js $('#inputKeypad').keypad({     showOn: 'focus',     showAnime: 'blind',     duration: 'fast',     keypadOnly: false,     onKeypress: null,     onClose: function () {         var evt = document.createEvent('HTMLEvents');         evt.initEvent('input', true, false);         this.dispatchEvent(evt);     } }); ```  試していませんが、`onKeypress` で発火するようにすればリアルタイムで同期がとれそうです。  ## 参考 URL  - https://qiita.com/solabito331/items/f06d613c166e2bed2839 - https://qiita.com/kawasima/items/d052d0f4565c7f0a7492 - https://chi-bd.hatenadiary.org/entry/20170723/1500796421

テンプレートテスト

2021/03/19

プログラムから C:\Windows\System32 にアクセスできない

2021/03/17

jQuery Keypad を使ってみた

Translate

Popular Posts

Labels

Blog Archive