隐藏的< input>并非< form>包含在“标签"顺序 [英] hidden <input> not in a <form> is included in "tab" sequence
问题描述
在google maps v3中，我正在使用信息窗口.我正在使用以下变量作为信息窗口的内容(因为在这种情况下我不知道如何使用a).
In google maps v3 I am using an infowindow. I am using the following variable as the content of the infowindow (because I don't know how to use a in this situation).
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>';
问题在于，在信息窗口气泡中，隐藏"输入需要为用户提供一个额外的Tab.我已经阅读了SO中的答案，这些答案建议在 display:none 中使用< div ，但是我不知道在a中使用< div 变量，例如我的 inputForm .
The problem is that in the infowindow bubble the "hidden" input requires an extra Tab for the user. I have read answers in SO that suggest using <div with display: none but I am not aware of using a <div in a variable like my inputForm.
如何删除不必要的标签?
How can I remove the unnecessary Tab?
编辑代码:
要测试此代码，请单击某处，然后出现带有信息窗口的标记.在气泡内单击，然后使用Tab键查看它在文本字段和提交"按钮之间的停止位置.
To test this code, click somewhere and a marker with an infowindow appears. Click inside the bubble and then use Tab to see it stops between the text field and the Submit button.
<!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
If you don't want the element to be tabbed to, set the tabindex to -1, which removes the element from the 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>';
这篇关于隐藏的< input>并非< form>包含在“标签"顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
