无需输入即可在QR码中插入值

时间:2017-12-04 10:34:27

标签: javascript

大家好,请帮帮我,我想在qrcode中插入输入值而不输入任何内容。

         <input id="text" type="text" value="Please Enter Your 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" />

           <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>       

请检查这个小提琴链接: -

https://jsfiddle.net/v274z2oc/

1 个答案:

答案 0 :(得分:0)

您必须在window.onload = generateBarCode; 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;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="text" type="text" value="Please Enter Your 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" />
&#13;
Counter
&#13;
&#13;
&#13;