Блог

Главная - Вопросы по программированию - скрытый не в включен в последовательность «tab»

скрытый не в включен в последовательность «tab»

#javascript #html #google-maps-api-3

#javascript #HTML #google-maps-api-3

Вопрос:

В Google maps v3 я использую информационное окно. Я использую следующую переменную в качестве содержимого 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 «скрытый» ввод требует дополнительной вкладки для пользователя. Я прочитал ответы в SO, которые предлагают использовать <div with display: none , но я не знаю об использовании <div в переменной, подобной my inputForm .

Как я могу удалить ненужную вкладку?

РЕДАКТИРОВАТЬ код:

Чтобы протестировать этот код, щелкните где-нибудь, и появится маркер с информационным окном. Щелкните внутри пузырька, а затем используйте 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>

Ответ №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>';

Комментарии:

1. Я не знал, type="hidden" что элементы могут быть с вкладками в первую очередь.

2. @NiettheDarkAbsol — Я тоже не был, я думаю, что более старый IE сохранял бы скрытые элементы в порядке табуляции, но OP утверждает, что это то, что происходит в Картах Google, и способ удалить элемент из порядка табуляции — установить tabindex в отрицательное значение.

3. Происходит что-то сумасшедшее. Когда я помещаю ваш ответ в JSFiddle, я не получаю вкладку с вашим добавлением индекса табуляции -1 или без него. Но тогда ваш ответ ничего не меняет в моем Chrome на Mac как отдельный HTML-файл. Я добавлю полный тестовый код к вопросу, чтобы посмотреть, не является ли причиной разницы что-то еще, например, заголовок.

Ответ №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'));

Комментарии:

1. Это отличная идея, но когда я ввожу ваше определение в свой код, я все равно получаю дополнительную вкладку. Что я делаю не так? (Должен признать, мне трудно запустить приведенный выше код. Я продолжаю получать ошибку «Uncaught SyntaxError: неожиданный конец ввода»)