Javascript 仅在模糊和未从下拉列表中选择时显示警报
我使用Google Maps Places自动完成输入。我试图在某种程度上强制用户从已填充的drowdown中选择一个地址,因为我希望使用所选的位置 不过,我的问题是,我想让用户输入一个可能不由Google填充的地址,因此我想显示一个警报,询问用户地址是否正确 这里的问题是,即使我从下拉列表中选择,它也会显示警报,因为输入会模糊 我如何确保只有在未选择谷歌的任何位置且该位置模糊时才会显示警报Javascript 仅在模糊和未从下拉列表中选择时显示警报,javascript,google-maps-api-3,vue.js,Javascript,Google Maps Api 3,Vue.js,我使用Google Maps Places自动完成输入。我试图在某种程度上强制用户从已填充的drowdown中选择一个地址,因为我希望使用所选的位置 不过,我的问题是,我想让用户输入一个可能不由Google填充的地址,因此我想显示一个警报,询问用户地址是否正确 这里的问题是,即使我从下拉列表中选择,它也会显示警报,因为输入会模糊 我如何确保只有在未选择谷歌的任何位置且该位置模糊时才会显示警报 <template> <input type="text
<template>
<input
type="text"
name="address"
@blur="onBlur()"
/>
</template>
<script>
//...
mounted: function() {
this.autocomplete = new google.maps.places.Autocomplete(
document.getElementById(this.id),
this.options
);
this.autocomplete.addListener('place_changed', (blur) => {
console.log('place changed ');
let place = this.autocomplete.getPlace();
this.setAddress(place);
});
},
methods: {
onBlur() {
this.isThisYourAddress();
},
isThisYourAddress() {
return swal('test');
}
}
</script>
基本思想是:每次设置输入值时,使用$refs保存输入值。在“模糊”中,检查该值是否与上次保存的值有所更改。诀窍是确保位置更改操作在启用模糊测试新值之前保存该值。我为此推迟了一点时间。你可能会找一个更好的看门人
new Vue({
el: '#app',
data: {
lastSelected: ''
},
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
document.getElementById('auto'),
this.options
);
this.autocomplete.addListener('place_changed', (blur) => {
var place = this.autocomplete.getPlace();
this.lastSelected = this.$refs.input.value;
console.log('place changed ', this.lastSelected);
this.setAddress(place);
});
},
methods: {
onBlur() {
setTimeout(() => {
const v = this.$refs.input.value;
if (v !== this.lastSelected) {
this.lastSelected = v;
this.isThisYourAddress();
}
}, 100);
},
isThisYourAddress() {
return 'something'
}
}
})
如果有人想要一支笔,谢谢你,罗伊!因为这是对谷歌的外部请求,你能想出一个解决办法而不是使用setTimeout吗?就目前而言,它应该可以工作,但只是想知道。而且,似乎即使使用您的代码片段Isthis,您的地址也会被调用,即使在通过下拉选择时也是如此。在这种情况下,我可以假设地址是正确的,因此它不应该显示出来。有什么想法吗?我已经更新了上面的代码摘录,但没有更新代码笔,因此只有在测试完成后才会调用isThisYourAddress。在查看了一段API之后,我没有看到比setTimeout更好的替代方法: