Vue.js enter key and blur events together

vue events
vue blur event
v-on=$listeners
vue checkbox event
vue custom event listener
vue on enter input
vue form submit
vue event naming convention

I am trying to make it so that if I press enter key or if element loses focus then it hides the element and shows a message. But the problem is that when I press the enter key and the element hides then it also triggers the blur event. It should only execute one of them.

Also how could I avoid having to repeat myself twice by calling the hideField() function. Can I call it only once (bur or key.enter)?

<input id="name" v-on:blur="hideField('name')" v-on:keyup.enter="hideField('name')">

Here is a fiddle. http://jsfiddle.net/dag5ch26/3/

You should call the blur method on the keyup.enter event. This results in the blur event being triggered indirectly.

<input id="name" v-on:blur="hideField('name')" v-on:keyup.enter="$event.target.blur()">

But the problem is that when I press the enter key and the element hides then it also triggers the blur event. It should only execute one of them. Vue allows adding key modifiers for v-on when listening for key events: <!-- only call `vm.submit()` when the `key` is `Enter` --> < input v-on:keyup.enter = "submit" > You can directly use any valid key names exposed via KeyboardEvent.key as modifiers by converting them to kebab-case.

Given the limitations of your example, I don't think it is necessary to fire the event on enter like you have it. As you see, the keyup.enter event also fires the blurs event, so why not rely on the blur exclusively? I understand you may have simplified your use case, but I don't see a reason for the keyup.enter here.

As a side note, instead of selecting the element by ID, you can just use event.target for the element reference. E.g. @v-on:blur="hideField". The event is passed to hideField() automatically. Alternatively, you could do @v-on:blur="hideField($event.target)" which would just pass the element itself to the method. This simplifies your call(s) and reduces unnecessary lookups.

I've updated the fiddle here: http://jsfiddle.net/dag5ch26/7/

vuejs / vue GitHub is home to over 50 million developers working together to host and when I trigger keyup enter events, the blur events also be triggered #​8088 click the new tag button. input something. press return. open the chrome That's normal browser behaviour, Vue has nothing to do with it. blur and click can't be trigger together. <input @blur="function_A"> <button @click="function_B"> if focus into input element first and then click button, will only trigger the function_A, but function_B never been triggered. any body know why?

I don’t believe there is a way to do this currently, although a v-on-many would be nice in future.

You could bind the event handlers yourself in JavaScript during the created life cycle handler.

Something like the below (although IMo this may be worse than your current implementation):

Component code {
    ...
    created() {
        window.addEventListener(‘click keyup’, function() {
    this.myComponentMethod(); }
    } }

We can use the v-on directive to listen to DOM events and run some Don't use .​passive and .prevent together, because .prevent will be ignored and only call `​vm.submit()` when the `key` is `Enter` --> <input v-on:keyup.enter="submit">. Key Modifiers. Similar to event modifiers, we can add key modifiers that allow us to listen to a particular key when handling key-related events such as keyup. <input v-on:keyup.13="addToCount" v-model="addValue"> In the above example, when the keyup event is fired with the key code of 13 (the enter key), the addToCount method gets called.

I'm using the events in 2 different ways: Enter: @keyup.enter="onEnter". Blur: address.addEventListener('blur', (e) => { console.log('received  For the Love of Physics - Walter Lewin - May 16, 2011 - Duration: 1:01:26. Lectures by Walter Lewin. They will make you ♥ Physics. Recommended for you

type="text" > </div> I want to able to use events from the <input> textbox from the parent component, like this: <te… Relay events from child input field to parent component · isometriq <text-input @keyup.enter="apply()" @focus="​glow(true)" @blur="glow(false)" . 4 Important Changes In Vue.js 2.4.0. An event occurs whenever the user does something with the app: mouse clicks, key presses etc. Vue events. To connect an event to a HTML element, add v-on in the HTML tag. Vue supports these events: v-on:click; v-on:keydown; v-on:submit; click event. To capture a click event, add v-on:click to an HTML element. Between the quotes, write the name

We can bind methods to events using their names. <input v-model="addValue"> <button  There are four arrow keys on the keyboard. We need to define custom key alias for the arrow keys in the keyCodes in Vue.config.The keyCodes of arrow keys are from 37~40, so we use array of numbers to define key alias.

Comments
  • Well, sometimes I'd like to be able to press enter on them as well.
  • One alternative solution would be to set some prop on data on the keyup.enter event to true and check if that value was still true in the blur event. If it's true in the blur event, just return. I favor this option less because it means you keep track of x number of fields on the page. You would also have to make sure to set the value back to false somehow too. (Maybe setTimeout? Feels hackey)