JavaScript для обработки Tab Key press

Ответ 1

Вы должны иметь возможность сделать это с помощью события keyup. Чтобы быть конкретным, event.target должен указывать на выбранный элемент, а event.target.href предоставит вам значение href этого элемента. Подробнее см. mdn.

Следующий код - jQuery, но, кроме кода шаблона, остальное то же самое в чистом javascript. Это обработчик keyup, связанный с каждым тегом ссылки.

$('a').on( 'keyup', function( e ) {
    if( e.which == 9 ) {
        console.log( e.target.href );
    }
} );

jsFiddle: http://jsfiddle.net/4PqUF/

Ответ 2

Следуя html:

<!-- note that not all browsers focus on links when Tab is pressed -->
<a href="http://example.com">Link</a>

<input type="text" placeholder="Some input" />
<a href="http://example.com">Another Link</a>

<textarea>...</textarea>

Вы можете перейти к активной ссылке:

// event listener for keyup
function checkTabPress(e) {
    "use strict";
    // pick passed event or global event object if passed one is empty
    e = e || event;
    var activeElement;
    if (e.keyCode == 9) {
        // Here read the active selected link.
        activeElement = document.activeElement;
        // If HTML element is an anchor <a>
        if (activeElement.tagName.toLowerCase() == 'a')
            // get it hyperlink
            alert(activeElement.href);
    }
}

var body = document.querySelector('body');
body.addEventListener('keyup', checkTabPress);

Вот рабочий пример.

Ответ 3

Учитывая этот фрагмент кода HTML:

<a href='https://facebook.com/'>Facebook</a>
<a href='https://google.ca/'>Google</a>
<input type='text' placeholder='an input box'>

Мы можем использовать этот JavaScript:

function checkTabPress(e) {
    'use strict';
    var ele = document.activeElement;

    if (e.keyCode === 9 && ele.nodeName.toLowerCase() === 'a') {
        console.log(ele.href);
    }
}

document.addEventListener('keyup', function (e) {
    checkTabPress(e);
}, false);

Я привязал прослушиватель событий к document для события keyUp, который запускает функцию, чтобы проверить, была ли нажата клавиша Tab (или технически, выпущена).

Функция проверяет текущий сфокусированный элемент и NodeName a. Если это так, он входит в блок if и, в моем случае, записывает значение свойства href в консоль JavaScript.

Здесь jsFiddle

Ответ 4

Только одно предложение вместо 9 вы можете использовать KeyCodes. TAB.

Ответ 5

Используйте TAB & TAB + SHIFT в указанном контейнере или элементе

Источник

сначала мы обработаем ключевые слушатели TAB & TAB + SHIFT

        $(document).ready(function() {
            lastIndex = 0;
            $(document).keydown(function(e) {
                if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
                if (e.keyCode == 9) {
                    if (e.shiftKey) {
                        //Focus previous input
                        if (thisTab == startIndex) {
                            $("." + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
                            return false;
                        }
                    } else {
                        if (thisTab == lastIndex) {
                            $("." + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
                            return false;
                        }
                    }
                }
            });
            var setTabindexLimit = function(x, fancyID) {
                console.log(x);
                startIndex = 1;
                lastIndex = x;
                tabLimitInID = fancyID;
                $("." + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
            }
            /*Taking last tabindex=10 */
            setTabindexLimit(10, "limitTablJolly");
        });

В HTML определите tabindex

        <div class="limitTablJolly">
            <a tabindex=1>link</a>    
             <a tabindex=2>link</a>    
             <a tabindex=3>link</a>    
             <a tabindex=4>link</a>    
             <a tabindex=5>link</a>    
             <a tabindex=6>link</a>    
             <a tabindex=7>link</a>    
             <a tabindex=8>link</a>    
             <a tabindex=9>link</a>    
             <a tabindex=10>link</a>   
        </div>

Ответ 6

попробуй это

 <body>
   <div class="linkCollection">
             <a tabindex=1 href="www.demo1.com">link</a>    
             <a tabindex=2 href="www.demo2.com">link</a>    
             <a tabindex=3 href="www.demo3.com">link</a>    
             <a tabindex=4 href="www.demo4.com">link</a>    
             <a tabindex=5 href="www.demo5.com">link</a>    
             <a tabindex=6 href="www.demo6.com">link</a>    
             <a tabindex=7 href="www.demo7.com">link</a>    
             <a tabindex=8 href="www.demo8.com">link</a>    
             <a tabindex=9 href="www.demo9.com">link</a>    
             <a tabindex=10 href="www.demo10.com">link</a>   
        </div>

</body>

<script>
$(document).ready(function(){
  $(".linkCollection a").focus(function(){
    var href=$(this).attr('href');
    console.log(href);
    // href variable holds the active selected link.
  });
});
</script>

не забыл добавить библиотеку jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Ответ 7

Вам нужно использовать регулярное выражение Для URL веб-сайта это

var urlPattern = /(HTTP | FTP | HTTPS)://[\ w-] + ([\ ш, @^ =% &amp.?;:/~ + # -] ([\ w] +.) * [\ ж @^ =% &?/~ + # -])/

Используйте это выражение, как в примере

var regex = новый RegExp (urlPattern); var t = 'www.google.com';
var res = t.match(regex/g);

Для вас нужно передать свою веб-страницу как строку в этот javascript в переменной t и получить массив