Generate QR Code using JQuery

Blog

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):

<style>
#divqrcode {
width: 102px;
height: 102px;
margin-top: 14px;
}
</style>
<div id="divqrcode"></div>

Complete code to generate QR code with default configuration:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery QRCode Example</title>
<!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=2,user-scalable=no" />-->
<style>
#divqrcode {
width: 102px;
height: 102px;
margin-top: 14px;
}
</style>
<script src="Scripts/jquery-latest.min.js"></script>
<script type="text/javascript" src=" Scripts/qrcode.min.js"></script>
</head>
<body>
<h1 style="margin-top:147px;">JQuery QRCode Demo</h1> Please enter your input:
<input id="texInput" type="text" value="SantoshA" /><br />
<div id="divqrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode($("#divqrcode"),
{
width: 102,
height: 102,
});
function generateCode()
{
var _text = $("#texInput");
if (!_text.value)
{
alert("Enter your input!");
_text.focus();
return;
}
qrcode.makeCode(_text.value);
}
generateCode();
$("#texInput").
on("blur", function()
{
generateCode();
}).
on("keydown", function(e)
{
if (e.keyCode == 13)
{
generateCode();
}
});
</script>
</body>