javascript - 按下回车键时输入表单和选择表单之间发生冲突

Question

我有一个带有一些输入表单的搜索框和一个带有一些选项的选择表单。输入表单之一是谷歌地图自动完成的地点，如果不存在任何选择表单，它可以正常工作。如果在我的搜索框中我有一个带有一些选项的选择表单，当我使用带有地点自动完成功能的输入表单并且按下 Enter 键时，我的页面将重新加载，并且在 url 的最后显示一个 ?，像这样http://www.lasige.di.fc.ul.pt/webtools/ondequemvaiver/agora/?您可以在这里测试这个问题:my app在表单 Onde 中输入 Lisboa，然后按 Enter 键。

HTML:

<div class="row">
        <div class="col-xs-5 coluna-input">
            <form role="form">
                <div class="form-group">
                    <label for="pesquisar">Pesquise</label>
                    <input type="text" class="form-control" id="pesquisar" placeholder="Pesquisar...">
                </div>
                <div class="form-group">
                    <label for="quando">Quando</label>
                    <input type="text" class="form-control" id="quando" placeholder="Quando">
                </div>
            </form>
        </div>

        <div class="col-xs-5 coluna-input">
            <form role="form">
                <div class="form-group">
                    <label for="pac-input">Onde</label>
                    <input type="text" class="form-control" id="pac-input" placeholder="Onde">
                </div>
                <div class="form-group">
                    <label for="genero">Género</label>
                    <select class="form-control" id="genero">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
            </form>
        </div>

我的代码:

ev.views.Home = Backbone.View.extend({
    // construtor
    initialize: function(map, p, firstEntry){
        var that = this;
        that.template = _.template(ev.templateLoader.get('home'));
        // evento que e disparado quando o router atual muda
        ev.router.on("route", function(route, params) {
            that.deleteMarkers();
        });
        that.map = map; // variavel com o mapa
        that.firstEntry = firstEntry; // valor do firstEntry quando entra no router pagesearch
        that.p = p; // valor da pagina
        that.icons = [];
        that.render(that.map, that.p, that.firstEntry);
    },

    // funcao que representa a funcionaliade de pesquisar por localidade
    local: function(map){
        var that = this;
        that.map = map;
        var input = (that.$el.find('#pac-input')[0]);

        var options = {
            types: ['geocode'],
            componentRestrictions: {country: "pt"}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options);
        autocomplete.bindTo('bounds', that.map);

        var infowindow = new google.maps.InfoWindow();


        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infowindow.close();
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
              that.map.fitBounds(place.geometry.viewport);
              that.map.setZoom(12);
              that.map.setCenter(place.geometry.location);
            } else {
              that.map.setCenter(place.geometry.location);
              that.map.setZoom(12);  // Why 17? Because it looks good.
            }


        }); 
    },

    events: {
        'click #search' : 'searchKey',
        'click #maisFiltros' : 'maisFiltros',
        'mouseover .back' : 'overImagem'    
    },



    // funcao que renderiza o template e a collection que contém a lista de eventos
    render: function(map, p, firstEntry){
        var that = this;
        that.map = map;
        that.firstEntry = firstEntry;
        that.p = p;
        that.$el.html(that.template());
        setTimeout(function() {
            that.local(that.map);
            // entra so o utilizador nao fizer pesquisa ou se fizer e entrar no route pagesearch
            if(that.firstEntry != 0){
                that.marcadores = new ev.views.Markers(that.map,p);
                $("#lista").html(new ev.views.ListaEventos(that.p).el);
            }else{
                // obtem os valores dos campos de pesquisa que estao guardados na chave key
                // que deopis passa esses valores para a pesquisa
                that.keyword = ev.keyword.get('key');
                that.secondSearch = new ev.views.Pesquisa(that.keyword, that.p, that.map);
                $("#lista").html(that.secondSearch.el);
            }
        }, 0);
        return that;
    }

});

Answer 1

$("input[type='text']").keydown(function(e){if (e.keyCode == 13){e.preventDefault();return false;}})

这将为所有文本类型的输入设置一个键处理程序，禁用输入时的默认操作。这将为页面上的每个输入执行此操作，当然您可以更改所需的输入，而无需默认行为。