Emitere eveniment JS la adaugare automat date in input

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
andras
Mesaje: 430

Emitere eveniment JS la adaugare automat date in input

Salut.
Utilizatorul deschide o pagina HTML in care exista un cimp input text cu autofocus. Scaneaza codul de bare si in cimpul input text apare stringul corespunzator, dupa care utilizatorul da click pe un buton si aplicatia afiseaza toate informatiile corespunzatoare stringului citit din codul de bare.
Intrebare:
Cum se poate automatiza, adica utilizatorul sa se limiteze doar la deschiderea paginii, iar dupa scanarea codului de bare functia sa se execute automat si sa afiseze datele?
Cred ca evenimentul onchange nu este suficient, ar trebui ceva cu function.ready(). O idee? Multumesc.

MarPlo Mesaje: 4343
Salut
Se poate cu evenimentul 'change' (sau cu 'input'), dar nu doar cu simpla lui inregistrare.
Ca 'input' (sau 'change') sa fie detectat cand se adauga automatizat date in campul text, se emite automat si evenimentul respectiv, prin crearea lui in obiectul Event si emiterea cu dispatchEvent().
- Incearca acest exemplu cu 'input' ca sa intelegi:

Cod: Selectaţi tot

<input type='text' name='inp1' id='inp1' />
<script>
inp1 = document.getElementById('inp1');

//register input event to #inp1
inp1.addEventListener('input', (e)=>{
  alert(e.target.value);
});

//create Event object with 'input' to automatically dispatch it when it's necessary
var ev_inp = new Event('input');

//automatically add some value in #inp1 after 2 sec., and dispatch the input event
window.setTimeout(()=>{
  inp1.value ='Be Happy';
  inp1.dispatchEvent(ev_inp);
}, 2000);

//The input event will be automatically detected whet setTimeout() dispatch the input

</script>

andras Mesaje: 430
Functioneaza foarte bine. Multumesc!
- Tot la problema asta mai doresc un lucru: cum fac ca dupa scanare si afisarea datelor aplicatia sa dea un "bip" sonor scurt?

MarPlo Mesaje: 4343
Sunt mai multe modalitati:
1. Cu html si js: adaugi un element <audio> ascuns in pagina, iar in javascript aplici metoda element.play() cand vrei sa apara semnalul sonor:

Cod: Selectaţi tot

<audio id='abip' style="display:none" src="bip.wav"></audio>
<script>
abip = document.getElementById('abip');
//your code

abip.play(); //can be added into a function
</script>

2. Sau doar cu JavaScript, creezi un obiect Audio('file.wav') si aplici metoda play() la acel obiect cand vrei sa apara semnalul sonor:

Cod: Selectaţi tot

<script>
abip = new Audio('bip.wav');
//your code

abip.play(); //can be added into a function
</script>

Subiecte similare