Question

我遇到了这个API服务器以生成QRCode，但我想知道是否可以使用HTML来生成QRcode，例如这就是我的想法

   <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&amp;size=100x100" alt="" title="HELLO" />

在＆＃34;标题＆＃34;我相信这是你写你的文字和QR码会产生的地方，我想知道如何为我创建一个文本框来直接在网站上输入值。

Answer 1

你想到这样的事吗？ https://jsfiddle.net/v7d6d1ps/

您的HTML可以与您的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 + '&amp;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&amp;size=100x100" 
            alt="" 
            title="HELLO" 
            width="50" 
            height="50" />
    </body>
</html>

将其复制并粘贴到桌面上的HTML文件中。在文本框12345中键入并按Tab键。请注意，QR码将更新。

Answer 2

非常好的qr代码正在生成的 https://api.qrserver.com/v1/create-qr-code/?data=YOUR-OWN-TEXT&size=50x50 做得好但你可以将onblur（）事件替换为onsubmit（）并通过单击按钮提交qr代码图像生成它还需要互联网连接到链接服务器并生成qr代码

可以在XML文件中构建离线qrcode生成器

使用HTML生成简单的QR码

2 个答案: