基于文本框输入的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条码显示

回答

相关问题