index-svg.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
  3. <head>
  4. <title>Cross-Browser QRCode generator for Javascript</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  7. <script type="text/javascript" src="jquery.min.js"></script>
  8. <script type="text/javascript" src="qrcode.js"></script>
  9. </head>
  10. <body>
  11. <input id="text" type="text" value="http://jindo.dev.naver.com/collie" style="width:80%" />
  12. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  13. <g id="qrcode"/>
  14. </svg>
  15. <script type="text/javascript">
  16. var qrcode = new QRCode(document.getElementById("qrcode"), {
  17. width : 100,
  18. height : 100,
  19. useSVG: true
  20. });
  21. function makeCode () {
  22. var elText = document.getElementById("text");
  23. if (!elText.value) {
  24. alert("Input a text");
  25. elText.focus();
  26. return;
  27. }
  28. qrcode.makeCode(elText.value);
  29. }
  30. makeCode();
  31. $("#text").
  32. on("blur", function () {
  33. makeCode();
  34. }).
  35. on("keydown", function (e) {
  36. if (e.keyCode == 13) {
  37. makeCode();
  38. }
  39. });
  40. </script>
  41. </body>
  42. </html>