Mercurial > qr-html
comparison index.html @ 3:6875be47fb24
Now with less jquery
| author | nanaya <me@myconan.net> |
|---|---|
| date | Sun, 15 Jan 2017 19:17:27 +0900 |
| parents | f27dbbc6e978 |
| children | cc0a5142a56f |
comparison
equal
deleted
inserted
replaced
| 2:f27dbbc6e978 | 3:6875be47fb24 |
|---|---|
| 77 | 77 |
| 78 <a href="https://bitbucket.org/nanaya1/qr-html">Source</a> | 78 <a href="https://bitbucket.org/nanaya1/qr-html">Source</a> |
| 79 </div> | 79 </div> |
| 80 </div> | 80 </div> |
| 81 | 81 |
| 82 <script src="jquery.min.js"></script> | |
| 83 <script src="qrcode.min.js"></script> | 82 <script src="qrcode.min.js"></script> |
| 84 <script src="lodash.min.js"></script> | 83 <script src="lodash.min.js"></script> |
| 85 | 84 |
| 86 <script> | 85 <script> |
| 86 var inputDom = document.getElementsByClassName("js-qr-input")[0] | |
| 87 var outputDom = document.getElementsByClassName("js-qr-output")[0] | 87 var outputDom = document.getElementsByClassName("js-qr-output")[0] |
| 88 var qr = new QRCode(outputDom) | 88 var qr = new QRCode(outputDom) |
| 89 | 89 |
| 90 var refreshCode = function(e) { | 90 var refreshCode = function() { |
| 91 var text = e.target.value | 91 var text = inputDom.value |
| 92 | 92 |
| 93 if (text !== "") { | 93 if (text !== "") { |
| 94 qr.makeCode(text) | 94 qr.makeCode(text) |
| 95 outputDom.classList.remove('js-hidden') | 95 outputDom.classList.remove('js-hidden') |
| 96 } else { | 96 } else { |
| 97 outputDom.classList.add('js-hidden') | 97 outputDom.classList.add('js-hidden') |
| 98 } | 98 } |
| 99 } | 99 } |
| 100 | 100 |
| 101 $(".js-qr-input").on("input", _.debounce(refreshCode, 100)) | 101 inputDom.addEventListener('input', _.debounce(refreshCode, 100)) |
| 102 refreshCode() | |
| 102 </script> | 103 </script> |
| 103 </body> | 104 </body> |
