allora killer il tuo codice l ho provato esternamente al mio sito e funziona alla grande...applicandolo nel mio sito però rimane un piccolo problemino... adesso non ritorna il focus quando clicco sullo sfondo grigio per entrambi i bottoni barcode e ricerca prodotto mentre tutte le altre volte (quindi se clicco su altri bottoni o sugli radio, mi ritorna il focus su barcode come volevo ) ... temo sia colpa mia perchè non ti ho dato gli input corretti e non ti ho detto che in questi input utilizzavo altre funzioni che forse potrebbero andare in contrasto al codice che mi hai dato..
questi sono gli input corretti (l id del primo input era barcodes e non barcode tralaltro, sorry)
codice HTML:
<HEAD>
//css
<style>
.invalid {
border-color: red;
border-radius: 8px;
background-color: white;
background-image: url('immagini/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
height: 40px;
}
.invalid2 {
border-radius: 8px;
background-color: white;
background-image: url('immagini/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
height: 40px;
}
.barcodes{
border-color: #6bfb35;
border-radius: 8px;
background-color: white;
background-image: url('immagini/barcodeicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
height: 40px;
}
.barcodes2{
border-radius: 8px;
background-color: white;
background-image: url('immagini/barcodeicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
height: 40px;
}
.box{}
#avvertimento { color: red }
#avvertimento2 { color: green }
</style>
<script>
//script per messaggi colorati
// se clicco dentro input ricerca prodotto
function myfocus() {
//restituisco messaggio rosso
ricerca.classList.add('invalid');
avvertimento.innerHTML = '<b>Se vuoi usare la pistola dei codici a barre per vendere un prodotto assicurati di non aver cliccato dentro questo rettangolo di ricerca prodotto, ma di essere dentro "barcode" altrimenti la pistola non funziona!!</b>';
}
// se clicco fuori input ricerca prodotto
function myFunction() {
// rimuovo messaggio rosso
ricerca.classList.remove('invalid');
avvertimento.innerHTML = "";
}
// se clicco dentro input barcode
function myfocus2() {
//restituisco un messaggio verde
barcodes.classList.add('barcodes');
avvertimento2.innerHTML = '<b>Campo selezionato. Puoi utilizzare la pistola Barcode!!</b>';
}
// se clicco fuori input barcode
function myFunction2() {
// rimuovo messaggio verde
barcodes.classList.remove('barcodes');
avvertimento2.innerHTML = "";
}
</script>
// script di killerworm
<script>
window.addEventListener('focus', refocusBarcodes); // Riprendo il focus quando questa finestra del browser ritorna attiva
document.addEventListener('focusin', refocusBarcodes); // Per IE
[].forEach.call(document.querySelectorAll('.onblur-refocus-barcodes'), function(e){
e.addEventListener('blur', refocusBarcodes);
});
function refocusBarcodes(e){
setTimeout(function(){
if(!document.activeElement.classList.contains('onblur-refocus-barcodes')) document.getElementById('barcodes').focus();
});
};
</script>
</HEAD>
<BODY>
<input type='text' id='barcodes' name='barcode' placeholder='BarCode' class='barcodes2 onblur-refocus-barcodes' onBlur='myFunction2();' onfocus='myfocus2()' autofocus>
<input type='text' id='ricerca' onkeyup='cerca()' onBlur='myFunction();' onfocus='myfocus()' name='ricerca' placeholder='Ricerca prodotto...' class='invalid2 onblur-refocus-barcodes'>
</BODY>
mi dirai ma che ci fai con tutti sti onBlur e onfocus?... praticamente li utilizzo se guardi nell immagine video che ti ho postato prima per dare un messaggio in rosso quando ho il focus in "ricerca prodotto" e un messaggio in verde quando ho il focus in "barcodes" ( onfocus='myfocus()' ed onfocus='myfocus2()' )..ho messo anche delle funzioni onblur per rimuovere i messaggi colorati quando perdo i focus. ( onBlur='myFunction();' ed onBlur='myFunction2();' )
Ho pensato allora adesso di far cosi:
codice HTML:
// se clicco fuori input ricerca prodotto
function myFunction() {
// rimuovo messaggio rosso
ricerca.classList.remove('invalid');
avvertimento.innerHTML = "";
document.getElementById("barcodes").focus(); ---------> aggiunto questa riga per farmi ritornare il focus su barcode quando clicco sullo sfondo grigio e funziona
}
// se clicco fuori input barcode
function myFunction2() {
// rimuovo messaggio verde
barcodes.classList.remove('barcodes');
avvertimento2.innerHTML = "";
document.getElementById("barcodes").focus(); -----------> qui ho provato la furbata di far tornare il focus sempre a se stesso ma non funziona
}