我遇到这个
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。请注意,QR 码将更新。
您可以使用下面的代码片段,作为最简单的方法:
function UpdateQRCode(val){
document.getElementById("qrcode").setAttribute("src","https://api.mimfa.net/qrcode?value="+encodeURIComponent(val)+"&as=value");
}
document.addEventListener("DOMContentLoaded", function(){
UpdateQRCode(document.getElementById("qrcode").value);
});
<input onchange="UpdateQRCode(this.value)" value="Hello World..."/><br>
<iframe id="qrcode" src="" width="250" height="250"></iframe>
享受...