仅使用 HTML 生成简单的二维码答案

【问题标题】：Generating a Simple QR-Code with just HTML仅使用 HTML 生成简单的二维码
【发布时间】：2021-08-23 12:15:46
【问题描述】：

我遇到了这个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&amp;size=100x100" alt="" title="HELLO" />

在“标题”中，我相信您将在此处编写文本并生成 QR 码，我想知道如何创建一个文本框让我直接在网站上键入值。

【问题讨论】：

标签： qr-code

【解决方案1】：

你想过这样的事情吗？ 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 + '&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 并点击选项卡。注意二维码会更新。

【讨论】：

不知道为什么，但 generateBarCode 缺少开场白
@Sidney 您看到哪一行缺少开场白？
您可以使用单引号或双引号。所以onblur='generateBarCode();' 和onblur="generateBarCode();" 都可以工作。 id='barcode' 和 id="barcode" 也是如此
不知道为什么它仍然出现。开场报价已经存在，但错误不断出现。无论如何要解决这个问题？
您看到什么样的错误？我将确切的 HTML 放在 my projects page 上，它可以按需要工作。随意右键单击页面>查看页面源并根据需要复制和粘贴。