我需要有关基于文本框输入的条形码显示方面的帮助。例如，如果键入“Computer”并按“Enter”键输入另一个词。我想让它显示在条形码上
<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 + '&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&size=100x100"
alt=""
title="HELLO"
width="100"
height="100" />
</body>
</html>
最佳答案
您可以使用 oninput 事件来处理文本输入中的任何更改:
function generateBarCode() {
var nric = $('#text').val();
var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&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&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 + '&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&size=100x100"
alt=""
title="HELLO"
width="100"
height="100" />在上面我使用了var code = !e || (e.keyCode ? e.keyCode : e.which); 检测是否按下回车 (e.keyCode ? e.keyCode : e.which) (对于按键事件) ，或者如果没有为 onblur 事件按下任何键 (!e)。
关于javascript - 基于文本框输入的二维码显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43348247/