Javascript 我如何通过点击键盘上的enter按钮使我的Google Maps api v3地址搜索栏工作？_Javascript_Onclick_Onkeyup

Javascript 我如何通过点击键盘上的enter按钮使我的Google Maps api v3地址搜索栏工作？

javascript

Javascript 我如何通过点击键盘上的enter按钮使我的Google Maps api v3地址搜索栏工作？,javascript,onclick,onkeyup,Javascript,Onclick,Onkeyup,我正在开发一个网页，我只想做一些更用户友好的东西。我有一个功能强大的谷歌地图api v3和一个地址搜索栏。目前，我必须使用鼠标选择搜索来初始化地理编码功能。如何通过点击键盘上的“回车”按钮并单击“搜索”按钮使地图返回一个位置标记？我只是想让它尽可能的人性化下面是我为地址栏创建的javascript和div： var geocoder; function initialize() { geocoder = new google.maps.Geocoder (); fun

我正在开发一个网页，我只想做一些更用户友好的东西。我有一个功能强大的谷歌地图api v3和一个地址搜索栏。目前，我必须使用鼠标选择搜索来初始化地理编码功能。如何通过点击键盘上的“回车”按钮并单击“搜索”按钮使地图返回一个位置标记？我只是想让它尽可能的人性化

下面是我为地址栏创建的javascript和div：

var geocoder;
    function initialize() {
    geocoder = new google.maps.Geocoder (); 
    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
        }); 
                            }




           function initialize() {
        document.getElementById("address").focus(); }
    function setFocusOnSearch() {
        document.getElementById("search").focus(); }
    function codeAddress() {
        document.getElementById("address").focus(); }




    <body onload="initialize()">
                    <div id="geocoder">
        <input id="address" type="textbox" value="" "onblur="setFocusOnSearch()">
        <input id="search" type="button" value="Search" onclick="codeAddress()">
    </div>
                  </body>

var地理编码器；
函数初始化（）{
geocoder=newgoogle.maps.geocoder（）；
函数代码地址（）{
var address=document.getElementById（“地址”）.value；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
marker.setPosition（结果[0].geometry.location）；
map.setZoom（14）；
} 
否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
}); 
}
函数初始化（）{
document.getElementById（“地址”）.focus（）；}
函数setFocusOnSearch（）{
document.getElementById（“搜索”）.focus（）；}
函数代码地址（）{
document.getElementById（“地址”）.focus（）；}
如果我是你，我会将焦点设置为搜索按钮
因此，如果我理解正确，您必须输入一个地址并单击“搜索”才能进行地理编码
所以，我要做的是使它尽可能用户友好的是，在加载主体的过程中，我会将焦点设置为地址文本框
然后，当你从地址框中取出标签时，我会在onleave/onblur事件触发后将焦点设置到搜索按钮，然后你只需点击回车键，它就会进行地理编码
总之，您需要添加这两个：
body onload->setfocus to address文本框
地址文本框onblur/onleave->setfocustosearch按钮
第三个建议是，在搜索按钮触发后，将焦点设置回地址文本框，以便在不离开键盘的情况下启动整个过程
这里有一个关于设置焦点在加载上的链接。在离开时也很容易使用

这里有一个关于onblur的链接

更新以帮助您获得更多信息
好的，这里有一个演示页面，介绍如何使用onblur等。在纯javascript中，通常我会使用jquery，但我会保持它的简单性。我尝试粘贴它，但没有成功

好的，最后一次也是最后一次尝试，您的代码应该是这样的，但是javascript标记需要更改才能正确
    <javascript tags>
    var geocoder;

  function initialize() {
    geocoder = new google.maps.Geocoder (); 
    //Set focuse to address textbox
    document.getElementById("address").focus(); 
    }

    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
        }); 
        //Either way set focus to address textbox
        document.getElementById("address").focus();
                            }


    function setFocusOnSearch() {
        //Set focus to search button now that you have left address textbox
        document.getElementById("search").focus(); }

    <javascript tags end>

    <body onload="initialize()">
                    <div id="geocoder">
        <input id="address" type="textbox" value="" "onblur="setFocusOnSearch()">
        <input id="search" type="button" value="Search" onclick="codeAddress()">
    </div>
                  </body>


var地理编码器；
函数初始化（）{
geocoder=newgoogle.maps.geocoder（）；
//将焦点设置为地址文本框
document.getElementById（“地址”）.focus（）；
}
函数代码地址（）{
var address=document.getElementById（“地址”）.value；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
marker.setPosition（结果[0].geometry.location）；
map.setZoom（14）；
} 
否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
}); 
//无论哪种方式，都可以将焦点设置为地址文本框
document.getElementById（“地址”）.focus（）；
}
函数setFocusOnSearch（）{
//现在您已经离开了地址文本框，将焦点设置为搜索按钮
document.getElementById（“搜索”）.focus（）；}
如果我是你，我会将焦点设置为搜索按钮
因此，如果我理解正确，您必须输入一个地址并单击“搜索”才能进行地理编码
所以，我要做的是使它尽可能用户友好的是，在加载主体的过程中，我会将焦点设置为地址文本框
然后，当你从地址框中取出标签时，我会在onleave/onblur事件触发后将焦点设置到搜索按钮，然后你只需点击回车键，它就会进行地理编码
总之，您需要添加这两个：
body onload->setfocus to address文本框
地址文本框onblur/onleave->setfocustosearch按钮
第三个建议是，在搜索按钮触发后，将焦点设置回地址文本框，以便在不离开键盘的情况下启动整个过程
这里有一个关于设置焦点在加载上的链接。在离开时也很容易使用

这里有一个关于onblur的链接

更新以帮助您获得更多信息
好的，这里有一个演示页面，介绍如何使用onblur等。在纯javascript中，通常我会使用jquery，但我会保持它的简单性。我尝试粘贴它，但没有成功

好的，最后一次也是最后一次尝试，您的代码应该是这样的，但是javascript标记需要更改才能正确
    <javascript tags>
    var geocoder;

  function initialize() {
    geocoder = new google.maps.Geocoder (); 
    //Set focuse to address textbox
    document.getElementById("address").focus(); 
    }

    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
        }); 
        //Either way set focus to address textbox
        document.getElementById("address").focus();
                            }


    function setFocusOnSearch() {
        //Set focus to search button now that you have left address textbox
        document.getElementById("search").focus(); }

    <javascript tags end>

    <body onload="initialize()">
                    <div id="geocoder">
        <input id="address" type="textbox" value="" "onblur="setFocusOnSearch()">
        <input id="search" type="button" value="Search" onclick="codeAddress()">
    </div>
                  </body>


var地理编码器；
函数初始化（）{
geocoder=newgoogle.maps.geocoder（）；
//将焦点设置为地址文本框
document.getElementById（“地址”）.focus（）；
}
函数代码地址（）{
var address=document.getElementById（“地址”）.value；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
marker.setPosition（结果[0].geometry.location）；
map.setZoom（14）；
} 
否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
}); 
//双向集合f
document.getElementById('address').focus();

// Bind key-up event listener for address field
document.getElementById("address").addEventListener('keyup', function (event) {

    // Check the event key code
    if (event.keyCode == 13) {

        // Key code 13 == Enter key was pressed (and released)
        codeAddress();
    }
});