基於文本框輸入的QR條碼顯示

請根據文本框輸入，在條形碼顯示上需要幫助。例如，如果一個類型爲「計算機」並按「Enter」鍵輸入另一個單詞。我希望它顯示的條碼基於文本框輸入的QR條碼顯示

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

來源

2017-04-11 ojulari

可以使用oninput事件來處理文本輸入的任何變化：

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

或者你可以檢測用戶何時點擊回車鍵並更新條形碼。

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

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

在上述我用var code = !e || (e.keyCode ? e.keyCode : e.which);檢測是否輸入被按下(e.keyCode ? e.keyCode : e.which)（對於按鍵事件），或者如果沒有鍵被按下（!e）爲onblur事件。

來源

2017-04-11 14:16:01

非常感謝您......但是我希望文本輸入在按下ENTER鍵時關閉。例如添加然後如果我按下輸入新的單詞應該在它下面 – ojulari

@ojulari然後你需要改變你的輸入到一個'textarea'，允許多行 –

是啊，謝謝我已經做到了..非常感謝你 – ojulari

基於文本框輸入的QR條碼顯示

回答

相關問題