Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
97
rated 0 times [  104] [ 7]  / answers: 1 / hits: 8535  / 4 Years ago, sat, february 8, 2020, 12:00:00

I have a form that works strictly with a Barcode code that simulates an Enter event at the end of the read. (No keyboard and mouse). I'm having a hard time sending the focus to the next element (input sometimes a button). I prepared a playground for you so you can checkout my code. At some point this worked before a quasar dress-up and now it isn't. I refuse to think this is a quasar issue and more like a I suck problem lol.



The process is simple in theory. Wait for the input field to read the entire barcode before it fires the focus event. My best guess is to use the change event. When I tried the input or keydown event, it registered other stuff and fired other functions on every digit.. Big no-no, especially when making api calls.



Here is my sendFocus method.



sendFocus: function(e) {
document.addEventListener(keydown, function(e) {
var input = e.target.nodeName.toLowerCase() === input;
var form = e.target.form;
if (e.key === Enter && input) {
var index = Array.prototype.indexOf.call(form, e.target);
form.elements[index + 1].focus();
}
});
}


And the link to the codepen. Thanks in advance


More From » vue.js

 Answers
7

With @change (or native DOM onchange) event, any associated handler will get invoked as many times as you hit a key on the keyboard, and in your case, you are literally attaching a new handler every time a key is pressed (you seem to be good with Javascript and jQuery, so I hope the codepen was just for mere illustration... Unless I'm missing something?).


But anyway, in Vue (for this particular purpose), we usually want @keydown.enter. Have a read on Event Handling with Key Codes.


That being said, there are several approaches to achieving this "jump-to-next-field" behavior, but please consider the following example (which should also be applicable to Quasar's q-input).




new Vue({
el: '#app',

methods: {
focusNext(e) {
const inputs = Array.from(e.target.form.querySelectorAll('input[type=text]'));
const index = inputs.indexOf(e.target);

if (index < inputs.length) {
inputs[index + 1].focus();
}
}
}
})

<script src=https://cdn.jsdelivr.net/npm/[email protected]></script>

<div id=app>
<form>
<div>
<label>Field #1</label>
<input type=text @keydown.enter=focusNext />
</div>

<div>
<label>Field #2</label>
<input type=text @keydown.enter=focusNext />
</div>

<div>
<label>Field #3</label>
<input type=text />
</div>
</form>
</div>




[#4809] Wednesday, February 5, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
austynp

Total Points: 505
Total Questions: 118
Total Answers: 106

Location: Tajikistan
Member since Sun, Aug 29, 2021
3 Years ago
austynp questions
;