Post
Ask Question

Generate QR Code using JQuery

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">  
  3.   
  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>  
  18.   
  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>  
  23.   
  24.     <script type="text/javascript">  
  25.         var qrcode = new QRCode($("#divqrcode"),  
  26.         {  
  27.             width: 102,  
  28.             height: 102,  
  29.         });  
  30.   
  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:

 
Next Recommended Reading How to Add Item and Edit Row using PopUp Dialog in HTML Table using JQuery