避免并禁用输入字段的自动填充

Question

when I'm using more than one input in the form, autocomplete doesn't work but if its one input then it will work fine. I'm using this form to get address using google api and the problem every time when want to add new address i see the previous input

<form autocomplete="off" id="form_address" >
    <input type="text" id="postal_code" onFocus="geolocate()">
    <input type="text" id="city">
    <textarea placeholder="Delivery Instructions"></textarea>
</form>  


<script>
    var placeSearch, postal_code;
    var componentForm = {
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
    };

    function initAutocomplete() {
        postal_code = new google.maps.places.Autocomplete((document.getElementById('postal_code')),
        {types: ['geocode']});
        postal_code.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
        var place = postal_code.getPlace();

        for (var component in componentForm) {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
        }

        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                document.getElementById(addressType).value = val;
            }
        }
    }

    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
                center: geolocation,
                radius: position.coords.accuracy
            });
            postal_code.setBounds(circle.getBounds());
            });
        }
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDDSzHOBeXL_Goaj4tecH3l0YTJ7anf2rc&libraries=places&callback=initAutocomplete" async defer></script>

Answer 1

您还应该在表单和输入元素上推迟自动完成

<form autocomplete="off" id="form_address"> <input type="text" autocomplete="off" id="postal_code" onFocus="geolocate()"> <input type="text" id="city"> <textarea placeholder="Delivery Instructions"></textarea> </form>