当光标在javascript中时，获取input的值

Question

我有一个输入：

<a-form-item label="user" :colon="false">
<a-input placeholder="user" name="user" @keyup.enter="checkUser"/>
</a-form-item>

方法：

checkUser() {
console.log('ok');
},

在方法中：checkUser当我输入时，我得到输入值。但现在我不想这么做，我想当我输入完输入值时，将光标移到外面，方法：checkUser将获得该输入的值。谢谢

Answer 1

使用blur事件侦听器。

<a-input placeholder="user" name="user" @blur="checkUser"/>

样品Fiddle

new Vue({
el: '#app',
data: {},
methods: {
checkUser: function(e) {
console.log("Blur event triggered", e.target.value)
}
},
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<input type="text" @blur="checkUser">
</div>

Answer 2

如果希望在移出光标时触发该方法，则可以使用@mouseleave事件。或如果你想在输入失去焦点时触发该方法，那么你可以尝试使用@blur事件

new Vue({
el: '#app',
methods: {
checkUser(e) {
if(e.target.value !== '') { // To check if the input is not empty
console.log("event triggered", e.target.value)
}
return;
}
},
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<input type="text" @mouseleave="checkUser">
<!-- OR -->
<!--<input type="text" @blur="checkUser"> -->
</div>