按下回车键时输入表单与 select 表单冲突

Question

我有一个带有一些输入表单的搜索框和一个带有一些选项的 select 表单。其中一种输入形式是来自 google 地图的位置自动完成，如果不存在任何 select 形式，它也能正常工作。如果在我的搜索框中我有一个带有一些选项的 select 表单，当我使用带有位置自动完成的输入表单并且当按下回车键时，我的页面会重新加载并且在 url 的最后显示一个 ?，像这样 http://www.lasige.di.fc.ul.pt/webtools/ondequemvaiver/agora/? 你可以在这里测试这个问题：my app 在表格 Onde 中输入 Lisboa 然后按回车键。

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;}})

这会为所有文本类型的输入设置一个键处理程序，禁用输入时的默认操作。这将为您页面上的每个输入执行此操作，您当然可以在没有默认行为的情况下为您想要的输入更改它。

按下回车键时输入表单与 select 表单冲突

Conflict between input form and select form when key enter is pressed

html

javascript

forms

jquery

backbone.js