Level 47
Probably try && instead of ||
You could drop the blur and use computed too.
Aug 15, 2016
9
Level 5
how to stop @blur from triggering on tab-key
So I have a form with an input and textarea field. I want @blur to launch a vue-method, but not if you press the tab-key to go to the next field, or if you click on the other field.
<form>
// stop @blur from triggering on
// 1) pressing tab key while in either one of the fields
// 2) clicking on the other field when one was focussed
<textarea @blur="blurOnEdit(item)" ></textarea>
<input @blur="blurOnEdit(item)" />
</form>
I've tried a couple of things, but none worked.
One I tried but doesn't work:
methods: {
blurOnEdit(item) {
if ( $('.updatebox input:focus').length > 0 || $('.updatebox textarea:focus').length > 0 ) {
return;
}
this.doneEdit(item);
},
}
}
Level 5
@jekinney I'm sorry to explain it poorly! I just want to launch a function when blurring the focussed input field. So when I click anywhere on the page outside of the input field, I'd want to launch a method.
This is easy when it comes to 1 input field: just add a @blur="method" to the html, but it's very hard when it comes to two input fields, and you need to not launch @blur when pressing immediately in the other input field, or when tabbing between the two input fields.
I hope this gives some more clarification! I do not need validation.
Level 47
checking if input is there is a form of validation.
|| is or so try && which is and.
Level 5
@jekinney Sorry! poor explanation again! I do not want to check for what's inside the input, empty is fine as well! I just need to check if the fields loose focus or not!
The reason is because I want to send ajax request and hide the input fields after clicking anywhere outside the fields. That's why I used blur. But I need it to wait with doing so when the place I click is in the other field, or I swap input fields with the tab key!
Level 5
@jekinney I think the confusion comes from my jQuery selector. Please notice the :focus.length. I'm checking if the field is focussed, not if it contains characters.
Level 13
You need to to track multiple events and the order in which they fire. @blur fires and then @DOMFocusOut follows.
Level 10
You can check the current focused field in the blur method. If any field has focus then return, otherwise call done doneEdit(). In jquery you can use:
var hasFocus = $('foo').is(':focus');
Level 13
I'm not exactly sure what you're trying to do. But here's some code to get you started...
<form action="">
<input
v-el:input
@blur="blurOnEdit(this.$els.input, $event)"
/>
<textarea
v-el:textarea
@blur="blurOnEdit(this.$els.textarea, $event)">
</textarea>
</form>
new Vue({
el: '#app',
methods: {
blurOnEdit: function(item, event) {
console.log(item, event);
}
}
});
http://codepen.io/alenabdula/pen/wWNkaL
Hope that helps, Best Alen.
Level 5
The problem was a short delay when selecting the next field. I fixed it using the following method:
blurOnEdit(item) {
let component = this;
setTimeout(function(){
if ( $('.updatebox input:focus').length > 0 || $('.updatebox textarea:focus').length > 0 ) {
return;
} else {
component.doneEdit(item);
}
},20);
},
Please or to participate in this conversation.