Stack Overflow em Português Asked on December 2, 2021
Estou tentando fazer com que o QR code ao ser scaneado ele imprima o valor dele no input, mas não estou conseguindo, utilizei algumas funções que eu conheço mas o qr code não é impresso no input de nenhuma forma, sou novato nisso.
<!DOCTYPE html>
<html>
<head>
<title>Instascan</title>
<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js" ></script>
</head>
<body>
<video id="preview"></video>
<script>
let scanner = new Instascan.Scanner(
{
video: document.getElementById('preview')
}
);
scanner.addListener('scan', function(content) {
alert('Escaneou o conteudo: ' + content);
});
Instascan.Camera.getCameras().then(cameras =>
{
if(cameras.length > 0){
scanner.start(cameras[0]);
} else {
console.error("Não existe câmera no dispositivo!");
}
});
var opa = "teste"
</script>
<input type="text" id="myText" value=""> </input>
<p><button onclick="myFunction()" id="meuElemento">QR CODE</button></p>
<script>
var botao = document.getElementById("meuElemento");
botao.onclick = function myFunction() {
document.getElementById("myText").value = content;
}
// alerta de presença cadastrada
function myFunction2() {
alert("Presença Cadastrada!");
}
</script>
</body>
</html>
Para quem estava com a mesma duvida consegui descobrir uma solução, onde era bem simples, segue o código abaixo do QR Code sendo reconhecido e logo após o valor sendo exibido no input.
<!DOCTYPE html>
<html>
<head>
<title>Instascan</title>
<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js" ></script>
</head>
<body>
<video id="preview"></video>
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
document.getElementById("yourInputFieldId").value = content; // Pass the scanned content value to an input field
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
<input type='text' id='yourInputFieldId' />
</body>
</html>
Answered by André Cabral on December 2, 2021
Utilizo também o Instascan com o mesmo objetivo. Dentro do método addListener, no lugar ou até junto do alert, utilize o seguinte, substituindo o "id_campo_de_envio" pelo id do elemento que receberá o dado de leitura:
$("#id_campo_de_envio").trigger("click");
Seu código ficaria assim (substitua o id para funcionar!!!):
<!DOCTYPE html>
<html>
<head>
<title>Instascan</title>
<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js" ></script>
</head>
<body>
<video id="preview"></video>
<script>
let scanner = new Instascan.Scanner(
{
video: document.getElementById('preview')
}
);
scanner.addListener('scan', function(content) {
$("#id_campo_de_envio").trigger("click");
});
Instascan.Camera.getCameras().then(cameras =>
{
if(cameras.length > 0){
scanner.start(cameras[0]);
} else {
console.error("Não existe câmera no dispositivo!");
}
});
var opa = "teste"
</script>
<input type="text" id="myText" value=""> </input>
<p><button onclick="myFunction()" id="meuElemento">QR CODE</button></p>
<script>
var botao = document.getElementById("meuElemento");
botao.onclick = function myFunction() {
document.getElementById("myText").value = content;
}
// alerta de presença cadastrada
function myFunction2() {
alert("Presença Cadastrada!");
}
</script>
</body>
</html>
O ".trigger("click")" executará o vulgo "enter no final".
Answered by Rodrigo Carvalho de Brito on December 2, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP