Question

在google maps v3中，我使用的是infowindow。我使用以下变量作为infowindow的内容（因为我不知道如何在这种情况下使用a。）

var inputForm = 'Name:  <input type="text" id="nameinput" size="31" maxlength="31" tabindex="1" />' + '<input type="hidden" id="pinId" value="' + counter + '" />' + '<button id="inputButton">Submit</button>';

问题是，在infowindow泡泡中，“隐藏”输入需要为用户提供额外的Tab。我已阅读SO中的答案，建议将<div与display: none一起使用，但我不知道在<div这样的变量中使用inputForm。

如何删除不必要的标签？

编辑代码：

要测试此代码，请单击某处，然后会出现带有infowindow的标记。在气泡内单击，然后使用Tab查看它在文本字段和提交按钮之间停止。

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js">
    </script>
    <script type="text/javascript">
        var map;
        var inwindow = new google.maps.InfoWindow();
        var markers = [];
        var counter = 0;

        function initialize() {

        var NY = new google.maps.LatLng(40.739112, -73.785848);
        map = new google.maps.Map(
            document.getElementById('map-canvas'), { center: NY, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP });

        google.maps.event.addListener(map, 'click', function (event) {
            addMarker(event.latLng);
            });

        google.maps.event.addListener(inwindow, 'domready', function () {
            var button = document.getElementById('inputButton');
            button.onclick = function() {
            var input = document.getElementById('nameinput').value;
            var id = parseInt(document.getElementById('pinId').value);
            titleMarker(id, input);
            inwindow.close();
            };
            });


        function addMarker(location) {

            counter++;

            var inputForm = 'Name:  ' + '<input type="text" id="nameinput" size="31" maxlength="31" tabindex="1" />' + '<input type="hidden" id="pinId" value="' + counter + '" tabindex="-1" />' + '<button id="inputButton">Submit</button>';

            var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true,
id: counter
});
inwindow.setContent(inputForm);
inwindow.open(map, marker);

markers.push(marker);

}

function titleMarker(markerId, markerTitle) {
    for (var i=0; i<markers.length; i++) {
    if (markers[i].id === markerId) {
        markers[i].setTitle(markerTitle);
    }
    }
}



google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
<body>
    <div id="map-canvas"/>
    </body>
</html>

Answer 1

如果您不希望将元素标记为，请将tabindex设置为-1，这会从tabindex中删除该元素

var inputForm = 'Name:  ' +
  '<input type="text" id="nameinput" size="31" maxlength="31" tabindex="1" />' + 
  '<input type="hidden" id="pinId" value="' + counter + '" tabindex="-1" />' + 
  '<button id="inputButton">Submit</button>';

Answer 2

它必须是隐藏的输入吗？为什么不将值作为数据属性存储在输入本身上？

var inputForm = 'Name:  ' + 
'<input type="text" id="nameinput" size="31" maxlength="31" tabindex="1" data-pinid="'+ counter +'" />' + 
'<button id="inputButton">Submit</button>';

然后你可以检索它：

var input = document.getElementById('nameinput').value;
var id = parseInt(input.getAttribute('data-pinid'));

隐藏的<input />不在<form>中，包含在“tab”序列</form>中

2 个答案: