仅用 HTML 生成一个简单的 QR-Code
Generating a Simple QR-Code with just HTML
我遇到这个 APIserver
来生成二维码,但我想知道是否可以只使用 HTML 来生成二维码,例如这就是我的想法
<input id="text" type="text" value="Please Enter Your NRIC or Work Permit" style="Width:20%"/>
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" alt="" title="HELLO" />
我相信在“标题”中,您将在此处编写文本并生成 QR 码,我想知道如何创建一个文本框供我直接在网站上键入值。
你有没有想过这样的事情? https://jsfiddle.net/v7d6d1ps/
您的 HTML 可能与您拥有的类似,但添加了 onblur 事件。只有HTML不能做到这一点,所以我添加了jQuery/JavaScript组合。
<html>
<head>
<title>Testing QR code</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function generateBarCode()
{
var nric = $('#text').val();
var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&size=50x50';
$('#barcode').attr('src', url);
}
</script>
</head>
<body>
<input id="text" type="text"
value="NRIC or Work Permit" style="Width:20%"
onblur='generateBarCode();' />
<img id='barcode'
src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100"
alt=""
title="HELLO"
width="50"
height="50" />
</body>
</html>
将其复制并粘贴到桌面上的 HTML 文件中。在文本框 12345 中键入并点击 Tab。请注意二维码将更新。
我遇到这个 APIserver
来生成二维码,但我想知道是否可以只使用 HTML 来生成二维码,例如这就是我的想法
<input id="text" type="text" value="Please Enter Your NRIC or Work Permit" style="Width:20%"/>
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" alt="" title="HELLO" />
我相信在“标题”中,您将在此处编写文本并生成 QR 码,我想知道如何创建一个文本框供我直接在网站上键入值。
你有没有想过这样的事情? https://jsfiddle.net/v7d6d1ps/
您的 HTML 可能与您拥有的类似,但添加了 onblur 事件。只有HTML不能做到这一点,所以我添加了jQuery/JavaScript组合。
<html>
<head>
<title>Testing QR code</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function generateBarCode()
{
var nric = $('#text').val();
var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&size=50x50';
$('#barcode').attr('src', url);
}
</script>
</head>
<body>
<input id="text" type="text"
value="NRIC or Work Permit" style="Width:20%"
onblur='generateBarCode();' />
<img id='barcode'
src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100"
alt=""
title="HELLO"
width="50"
height="50" />
</body>
</html>
将其复制并粘贴到桌面上的 HTML 文件中。在文本框 12345 中键入并点击 Tab。请注意二维码将更新。