Question

我需要基于文本框输入的条形码显示方面的帮助。例如，如果一种类型＆＃34;计算机＆＃34;然后按＆＃34;输入＆＃34;输入另一个词。我希望它显示在条形码上

<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();' /> <br>
        <br><br>
      <img id='barcode' 
            src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&amp;size=100x100" 
            alt="" 
            title="HELLO" 
            width="100" 
            height="100" />
    </body>
</html>

Answer 1

您可以使用oninput事件来处理文本输入中的任何更改：

＆＃13;

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);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <input id="text" type="text" value="NRIC or Work Permit" style="Width:20%" oninput='generateBarCode();' /> <br>
        <br><br>
      <img id='barcode' 
            src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&amp;size=100x100" 
            alt="" 
            title="HELLO" 
            width="100" 
            height="100" />

＆＃13;

或者您可以检测用户何时按下回车键并更新条形码。

＆＃13;

 function generateBarCode(e) {
  var code = !e || (e.keyCode ? e.keyCode : e.which);
  if(!e || code == 13) {
    var nric = $('#text').val();
    var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&amp;size=50x50';
    $('#barcode').attr('src', url);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="text" type="text" value="NRIC or Work Permit" style="Width:20%" onKeyPress='generateBarCode(event);' onblur='generateBarCode();' /> <br>
        <br><br>
      <img id='barcode' 
            src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&amp;size=100x100" 
            alt="" 
            title="HELLO" 
            width="100" 
            height="100" />

＆＃13;

在上面我使用var code = !e || (e.keyCode ? e.keyCode : e.which);来检测是否按下了输入(e.keyCode ? e.keyCode : e.which)（对于按键事件），或者是否没有按下!e的键onblur事件。

基于文本框输入的QR条形码显示

1 个答案: