Mercurial > qr-html

comparison index.html @ 1:30cd1768611b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Hide when box is empty
author nanaya <me@myconan.net>
date Sat, 15 Oct 2016 16:59:59 +0900
parents 6b5cab0b3f91
children f27dbbc6e978
comparison
equal deleted inserted replaced
0:6b5cab0b3f91 1:30cd1768611b
43 43
44 .page__main { 44 .page__main {
45 flex: 1; 45 flex: 1;
46 } 46 }
47 47
48 .outputbox {
49 will-change: opacity;
50 }
51
52 .outputbox.js-hidden {
53 opacity: 0;
54 }
55
48 .title { 56 .title {
49 font-size: 16px; 57 font-size: 16px;
50 } 58 }
51 </style> 59 </style>
52 </head> 60 </head>
59 Type something and get its QR code immediately. 67 Type something and get its QR code immediately.
60 </p> 68 </p>
61 69
62 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea> 70 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
63 71
64 <div class="js-qr-output"></div> 72 <div class="outputbox js-qr-output"></div>
65 </div> 73 </div>
66 74
67 <div> 75 <div>
68 <hr> 76 <hr>
69 77
81 $(".js-qr-input").on("input", function(e) { 89 $(".js-qr-input").on("input", function(e) {
82 var text = e.target.value; 90 var text = e.target.value;
83 91
84 if (text !== "") { 92 if (text !== "") {
85 qr.makeCode(text); 93 qr.makeCode(text);
94 outputDom.classList.remove('js-hidden');
95 } else {
96 outputDom.classList.add('js-hidden');
86 } 97 }
87 }); 98 });
88 </script> 99 </script>
89 </body> 100 </body>