隐藏& lt; input>不是以“形式”出现的;包含在"标签"序列

hidden <input> not in a <form> is included in "tab" sequence

本文关键字：quot 包含 标签 序列 input lt 隐藏 形式      更新时间：2023-09-26

在谷歌地图v3我使用的是一个信息窗口。我使用以下变量作为信息窗口的内容(因为我不知道在这种情况下如何使用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>';

问题是，在信息窗口气泡中的"隐藏"输入需要为用户提供额外的选项卡。我已经阅读了SO中的答案，建议使用<div和display: none，但我不知道在像inputForm这样的变量中使用<div。

如何删除不需要的选项卡?

编辑代码:

要测试此代码，单击某个位置，就会出现带有信息窗口的标记。单击气泡内部，然后使用Tab键查看它停在文本字段和Submit按钮之间。

<!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>

如果你不想让元素被标签化，将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>';

必须是隐藏输入吗?为什么不直接将值存储为输入本身的数据属性呢?

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'));
相关文章：