Foros del Web - Ver Mensaje Individual

emprear · #16 (**permalink**) 21/11/2012, 13:56

Hice un alto en la vista de "Luz de gas" para realizar esto

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Lector código de barras</title>
<style type="text/css">
/*<![CDATA[*/
body{
font-family: verdana, sans-serif;
font-size: 10pt;
}
figure#lector{
position: absolute;
top: 190px;
left: 100px;
z-index: 999;
}
#codigo{
position: absolute;
top: 300px;
left: 500px;
z-index: 2;
}
p#repetir{
display: none;
}
a{
color: #000;
}
iframe{
border: none;
width: 300px;
height: 60px;
}
/*]]>*/
</style>
<script type="text/javascript">
function capturar(evento) {
//  alert(evento.target.value);
    document.getElementById('stock').submit();
    document.getElementById('codigo_barras').value = "";
    document.activeElement.blur();
    document.getElementById('repetir').style.display= 'block';
    document.getElementById('lector').style.display= 'none';
    document.getElementById('codigo').style.display= 'none';
    }
    window.onload = function() {
        var campo =document.getElementById('codigo_barras');
        campo.addEventListener('focus',capturar,false);
}
 
/* efecto */
var i = 0;
var t;
function mover(margen,demora){
var pos = 320; // margen igual a la cuarta parte del ancho del div (tener en cuenta posibles paddings laterales 
var capa = document.getElementById('lector');
i++;
t= setTimeout(function() {
            capa.style.left = i + 'px';
            mover(margen,demora);
            if(i > pos){
            clearTimeout(t);
document.getElementById('codigo_barras').value = "123456789005";
document.getElementById('codigo_barras').focus();
capa.style.left = "100px";
i = 0;
            }
        }, demora);
}
</script>
</head>
<body>
<form action="cbar.php" id="stock" target="actualizar" method="post">
<label>Código de Barras </label>
<input type="text" id="codigo_barras" name="codigo_barras" value="" />
</form>
<iframe src="about:blank" name="actualizar" id="actualizar"></iframe>
<p id="repetir">
<a href="cbar.html">Repetir</a>
</p>
<figure id="lector" >
<img src="lcb.png" alt="" onclick="mover(100,1);"  title="123456789005"/>
<figcaption>
Click en el lector para la demo
</figcaption>
</figure>
<img src="code.png" alt="" id="codigo" />
</body>
</html>

El php

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<style type="text/css">
/*<![CDATA[*/
body{
font-family: verdana, sans-serif;
font-size: 10pt;
}
 
/*]]>*/
</style>
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<p>
Se actualizó stock para el producto:<br />
<strong>
<?php
echo $_POST['codigo_barras'];
?>
</strong>
</p>
</body>
</html>

Demo
http://foros.emprear.com/php/cbar/cbar.html

Si sirve para algo o no, es otra historia (y no funciona en IE < 9)
Como interactúa el lector de códigos de barra con el html sigue siendo un misterio.
Por lo pronto con el evento focus podría funcionar

Y no seas tan rígida Briss, todos intentan ayudarte, cada uno a su manera

Saludos