campo input

**Werwolfe** · 06-08-2021, 21:58

Ragazzi ho creato un lettore scannerizza il qrcode, vorrei che il risultato venisse inserito in un campo di input, ho modificato il file in questo modo:
codice:

codice:

var barcode_result = document.getElementById('input#dbr');

ma non lo inserisce se metto <span id='dbr'></span>
come posso far prendere il valore al campo di input

**Utonto Tonto** · 07-08-2021, 10:07

Non so in che formato sia il valore restituito del QR ma ad occhio...

codice:

const barcode_result = document.getElementById('input#dbr');
const qrValue = 'valore QR qui';

barcode_result.value = qrValue;

// Se vuoi visualizzare il QR anche nel campo input
barcode_result.textContent = qrValue;

**Werwolfe** · 08-08-2021, 09:22

Grazie provo e ti faccio sapere .

**ninja72** · 08-08-2021, 13:21

C'è un errore nell'uso del getElementById, da come è impostata dovresti utilizzare il querySelector, oppure modificare la stringa al suo interno puntando al solo id di riferimento.

codice:

        // const barcode_result = document.getElementById('dbr')
        const barcode_result = document.querySelector('input#dbr')
        const qrValue = 'valore QR qui'
        barcode_result.value = qrValue

**Utonto Tonto** · 08-08-2021, 13:30

Originariamente inviata da ninja72

C'è un errore nell'uso del getElementById, da come è impostata dovresti utilizzare il querySelector, oppure modificare la stringa al suo interno puntando al solo id di riferimento.

codice:

        // const barcode_result = document.getElementById('dbr')
        const barcode_result = document.querySelector('input#dbr')
        const qrValue = 'valore QR qui'
        barcode_result.value = qrValue

Giusto, mi era sfuggito

**Werwolfe** · 08-08-2021, 14:31

Ragazzi tutte le variabili sono qui

codice:

var videoElement = document.querySelector('video');var canvas = document.getElementById('pcCanvas');
var mobileCanvas = document.getElementById('mobileCanvas');
var ctx = canvas.getContext('2d');
var mobileCtx = mobileCanvas.getContext('2d');
var videoSelect = document.querySelector('select#videoSource');
var videoOption = document.getElementById('videoOption');
var buttonGo = document.getElementById('go');


var barcode_result = document.getElementById('dbr').value;
//var barcode_result =document.querySelector('input#dbr').value;

quando scannerizza il lettore deve darmi il risultato nel campo input con id dbr

lo script completo è questo

codice:

var videoElement = document.querySelector('video');var canvas = document.getElementById('pcCanvas');
var mobileCanvas = document.getElementById('mobileCanvas');
var ctx = canvas.getContext('2d');
var mobileCtx = mobileCanvas.getContext('2d');
var videoSelect = document.querySelector('select#videoSource');
var videoOption = document.getElementById('videoOption');
var buttonGo = document.getElementById('go');


var barcode_result = document.getElementById('dbr').value;
//var barcode_result =document.querySelector('input#dbr').value;


var isPaused = false;
var videoWidth = 640,
  videoHeight = 480;
var mobileVideoWidth = 200,
  mobileVideoHeight = 300;
var isPC = true;


var ZXing = null;
var decodePtr = null;


var tick = function () {
  if (window.ZXing) {
    ZXing = ZXing();
    decodePtr = ZXing.Runtime.addFunction(decodeCallback);
  } else {
    setTimeout(tick, 10);
  }
};
tick();


var decodeCallback = function (ptr, len, resultIndex, resultCount) {
  var result = new Uint8Array(ZXing.HEAPU8.buffer, ptr, len);
  console.log(String.fromCharCode.apply(null, result));
  barcode_result.textContent = String.fromCharCode.apply(null, result);
  buttonGo.disabled = false;
  if (isPC) {
    canvas.style.display = 'block';
  } else {
    mobileCanvas.style.display = 'block';
  }
};


// check devices
function browserRedirect() {
  var deviceType;
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  var bIsAndroid = sUserAgent.match(/android/i) == "android";
  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    deviceType = 'phone';
  } else {
    deviceType = 'pc';
  }
  return deviceType;
}


if (browserRedirect() == 'pc') {
  isPC = true;
} else {
  isPC = false;
}


// stackoverflow: http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158
function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;
  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = unescape(dataURI.split(',')[1]);


  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];


  // write the bytes of the string to a typed array
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }


  return new Blob([ia], {
    type: mimeString
  });
}


// add button event
buttonGo.onclick = function () {
  if (isPC) {
    canvas.style.display = 'none';
  } else {
    mobileCanvas.style.display = 'none';
  }


  isPaused = false;
  scanBarcode();
  buttonGo.disabled = true;
};


// scan barcode
function scanBarcode() {
  barcode_result.textContent = "";


  if (ZXing == null) {
    buttonGo.disabled = false;
    alert("Barcode Reader is not ready!");
    return;
  }


  var data = null,
    context = null,
    width = 0,
    height = 0,
    dbrCanvas = null;


  if (isPC) {
    context = ctx;
    width = videoWidth;
    height = videoHeight;
    dbrCanvas = canvas;
  } else {
    context = mobileCtx;
    width = mobileVideoWidth;
    height = mobileVideoHeight;
    dbrCanvas = mobileCanvas;
  }


  context.drawImage(videoElement, 0, 0, width, height);


  var vid = document.getElementById("video");
  console.log("video width: " + vid.videoWidth + ", height: " + vid.videoHeight);
  var barcodeCanvas = document.createElement("canvas");
  barcodeCanvas.width = vid.videoWidth;
  barcodeCanvas.height = vid.videoHeight;
  var barcodeContext = barcodeCanvas.getContext('2d');
  var imageWidth = vid.videoWidth, imageHeight = vid.videoHeight;
  barcodeContext.drawImage(videoElement, 0, 0, imageWidth, imageHeight);
  // read barcode
  var imageData = barcodeContext.getImageData(0, 0, imageWidth, imageHeight);
  var idd = imageData.data;
  var image = ZXing._resize(imageWidth, imageHeight);
  console.time("decode barcode");
  for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
    ZXing.HEAPU8[image + j] = idd[i];
  }
  var err = ZXing._decode_any(decodePtr);
  console.timeEnd('decode barcode');
  console.log("error code", err);
  if (err == -2) {
    setTimeout(scanBarcode, 30);
  }
}
// https://github.com/samdutton/simpl/tree/gh-pages/getusermedia/sources 
var videoSelect = document.querySelector('select#videoSource');


navigator.mediaDevices.enumerateDevices()
  .then(gotDevices).then(getStream).catch(handleError);


videoSelect.onchange = getStream;


function gotDevices(deviceInfos) {
  for (var i = deviceInfos.length - 1; i >= 0; --i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'videoinput') {
      option.text = deviceInfo.label || 'camera ' +
        (videoSelect.length + 1);
      videoSelect.appendChild(option);
    } else {455
      console.log('Found one other kind of source/device: ', deviceInfo);
    }
  }
}


function getStream() {
  buttonGo.disabled = false;
  if (window.stream) {
    window.stream.getTracks().forEach(function(track) {
      track.stop();
    });
  }


  var constraints = {
    video: {
      deviceId: {exact: videoSelect.value}
    }
  };


  navigator.mediaDevices.getUserMedia(constraints).
    then(gotStream).catch(handleError);
}


function gotStream(stream) {
  window.stream = stream; // make stream available to console
  videoElement.srcObject = stream;
}


function handleError(error) {
  console.log('Error: ', error);
}

**Werwolfe** · 08-08-2021, 14:36

Ho provato a fare cosi:

codice:

// const barcode_result = document.getElementById('dbr')        const barcode_result = document.querySelector('input#dbr');
        const qrValue = 'go';
        barcode_result.value = qrValue;

Ma non funziona

**Utonto Tonto** · 08-08-2021, 17:00

Originariamente inviata da Werwolfe

Ho provato a fare cosi:

codice:

// const barcode_result = document.getElementById('dbr')        const barcode_result = document.querySelector('input#dbr');
        const qrValue = 'go';
        barcode_result.value = qrValue;

Ma non funziona

Non funziona nel senso che la proprietà 'value' di 'barcode_result' non contiene il valore 'go' o nel senso che non vedi 'go' scritto nel campo input?
Nel primo caso verifica con un console.log(barcode_result.value). nel secondo caso devi usare:

codice:

barcode_result.textContent = qrValue;

**Werwolfe** · 08-08-2021, 22:04

Scusami in qrcode che devo mettere ? Id del input ? Non ho capito che va , io ho messo Go ma erroneamente perché id del bottone , mi fai capire cosa va in qrcode?
la parte html è molto semplice ha il lettore barcone è un input con name dbr, dove in questo value deve finire , la decodifica del barcone tutto qua

**Utonto Tonto** · 08-08-2021, 22:34

In qrValue va il valore del QR

Discussione: campo input

Strumenti discussione

Ricerca discussione

Visualizza

campo input

Permessi di invio