QRCode.js is a cross-browser compatibility JavaScript library which helps you to generate QR codes on the fly at client-side. "QRCode.js" uses HTML5 Canvas and HTML5 Tables to display the QR code. The library has no dependencies whatsoever. To generate a QR code, you just include the JavaScript library and then pass the required parameters to the QRCode function, the text you want to encode as the QR code, the width & height of the QR code you want to display, as well as your specified foreground color and background color.

Create a simple HTML div (optionally set a height and width with CSS):

  1. <style>
  2. #divqrcode {
  3. width: 102px;
  4. height: 102px;
  5. margin-top: 14px;
  6. }
  7. </style>
  8. <div id="divqrcode"></div>
Complete code to generate QR code with default configuration:
  1. <!DOCTYPE HTML>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>JQuery QRCode Example</title>
  6. <!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=2,user-scalable=no" />-->
  8. <style>
  9. #divqrcode {
  10. width: 102px;
  11. height: 102px;
  12. margin-top: 14px;
  13. }
  14. </style>
  15. <script src="Scripts/jquery-latest.min.js"></script>
  16. <script type="text/javascript" src=" Scripts/qrcode.min.js"></script>
  17. </head>
  19. <body>
  20. <h1 style="margin-top:147px;">JQuery QRCode Demo</h1> Please enter your input:
  21. <input id="texInput" type="text" value="SantoshA" /><br />
  22. <div id="divqrcode"></div>
  24. <script type="text/javascript">
  25. var qrcode = new QRCode($("#divqrcode"),
  26. {
  27. width: 102,
  28. height: 102,
  29. });
  31. function generateCode()
  32. {
  33. var _text = $("#texInput");
  34. if (!_text.value)
  35. {
  36. alert("Enter your input!");
  37. _text.focus();
  38. return;
  39. }
  40. qrcode.makeCode(_text.value);
  41. }
  42. generateCode();
  43. $("#texInput").
  44. on("blur", function()
  45. {
  46. generateCode();
  47. }).
  48. on("keydown", function(e)
  49. {
  50. if (e.keyCode == 13)
  51. {
  52. generateCode();
  53. }
  54. });
  55. </script>
  56. </body>
Output

Output

Browser Compatibility

IE8~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, etc.

Required files: