Select a thing Item 1 "> Select a thing Item 1 "> Select a thing Item 1 " />

Как я моделирую парение с JavaScript на keydown?

Сначала, я хотел бы использовать только родной JavaScript, чтобы выполнить эту задачу.

Скажем, я должен сделать обычай dropdown, и код HTML отчасти походит на это.

<div class="dropdown">
  Select a thing
  
</div>

В файле CSS у меня есть что-то близко к этому:

ul.dropdownItemContainer li:hover {
  background-color: #FF0000;
}

Да, нет действительно никакого dropdownish поведения, но это не пункт обсуждения на самом деле. Проблема состоит в том, что я не мог думать о достойном способе позволить контроль за клавиатурой для этого dropdown. Желаемый результат следующий: Я нажимаю вниз ключ, и право преимущественной покупки подчеркнуто; я нажимаю его снова, и второй вариант подчеркнут и так далее.

Единственный выбор, который я вижу в этом пункте (только что начал изучать JS) состоит в том, чтобы принести весь из ul дети, stick'em во множество и назначить признакам цвет фона через методы JS надлежащим способом каждый раз, когда вниз ключ нажат.

С другой стороны, я все еще имею: поведение парения описано в CSS для контроля за мышью. Есть ли умный способ моделировать парения?

5
nl ja de
только решения jQuery прибывают по моему мнению: (
добавлено автор Tom Sarduy, источник
События центра @AlessandroVendruscolo на основе tabindex не очень надежны. Например, : центр псевдокласс won' t вызывают в некоторых браузерах.
добавлено автор Christoph, источник
Перемещение с помощью клавиатуры делает интенсивное использование : центр .
добавлено автор Alessandro Vendruscolo, источник
Добавьте tabindex признак или поместите якоря в , литий s — видит этот ответ
добавлено автор Alessandro Vendruscolo, источник

4 ответы

Я пошел бы с простым назначением класса на ваших элементах лития и регулировал бы его с keydown укладчиком. Следующий код не предназначен, чтобы быть полным, но дать вам что-то, с чем можно работать.

var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li");

document.addEventListener("keydown",handler);
document.addEventListener("mouseover",handler);

function handler(e){
    console.log(e.which);
        active.classList.remove("hover");
    if (e.which == 40){
        active = active.nextElementSibling || active;
    }else if (e.which == 38){      
        active = active.previousElementSibling || active;
    }else{
        active = e.target;
    }
        active.classList.add("hover");
}

You can see a working example here

7
добавлено
+1 я брал на себя смелость, чтобы слить это с вашим кодом, Локи. Не стесняйтесь принимать этот ответ. Посмотрите jsfiddle.net/samliew/Hd7X9/4
добавлено автор Samuel Liew, источник
Спасибо за ваших парней времени.
добавлено автор Anton Matyulkov, источник
Большое спасибо за решение, я боролся с той же самой проблемой в течение довольно много времени.
добавлено автор Rojy Kumari, источник

Можно хотеть пользоваться библиотекой вместо того, чтобы кодировать это с нуля.

http://vebersol.net/demos/jquery-custom-forms/

http://www.dreamcss.com/2009/05/15-jquery-plugins-to-enhance-your-html.html

1
добавлено
Если вы могли бы обеспечить связь или воссоздать это на jsfiddle, мы могли работать над ним совместно.
добавлено автор Samuel Liew, источник
Спасибо за ваш ответ, но, как I' упомянутый ve, I' m пытающийся изучить родной JS, таким образом, я на самом деле хочу закодировать эту целую вещь с нуля. Я знаю, что jQuery обеспечивает много возможностей и опций настройки, и я допускаю they' ре, прохладное и полезное, но I' ll добираются до него в конечном счете:)
добавлено автор Anton Matyulkov, источник
jsfiddle.net/Hd7X9 - здесь вы идете. I' ve, письменный вы в Facebook, угадайте I' ll должен дать вам еще некоторый фон.
добавлено автор Anton Matyulkov, источник

Действительность вам не был нужен никакой JS для dropdown, но можно использовать событие JavaScript для моделирования его. Можно использовать событие как парение , центр , onclick

В ДЖС Ю Может использовать Это Для События Набора

  document.getElementById('id').addEventListener('focus',function(e){
    //place code that want ran at event happened
  }  

В jQuery можно использовать , связывают , щелчок ...

  $('#id')bind('focus',function(e){
    //place code that want ran at event happened
  }

Список события

http://www.quirksmode.org/dom/events/index.html

0
добавлено
@Christoph Да мы можем использовать событие центра quirksmode.org/dom/events/index.html
добавлено автор mohammad mohsenipur, источник
вы не можете использовать внимание на простые элементы списка...
добавлено автор Christoph, источник
хорошо, то, что элемент центра поддерживается, не изменяет то, что только окно , связи и formfields может быть сосредоточен по умолчанию. Необходимо объявить tabindex на элементе иначе, и даже тогда, центр несовместимо поддерживается.
добавлено автор Christoph, источник

Я предложил бы удалить признак парения из css. И добавьте только колебавшийся класс, который применяется на keypresses и на mouseover

Это могло быть похожим на это в Кодексе

var dropDown = document.getElementsByClassName("dropdownItemContainer")[0]

document.addEventListener("keydown",function (e) {
    if(e.keyCode == 38 || e.keyCode == 40 ) {
        var key = e.keyCode
        var hovered = dropDown.getElementsByClassName("hovered")
        if(hovered.length != 0 ) {
            cur = hovered[0]
            cur.className = ""
            cur = cur[(key==38?"previous":"next")+"ElementSibling"] || dropDown.children[key==38?dropDown.children.length-1:0] 
        } else {
            cur = dropDown.children[key==38?dropDown.children.length-1:0]
        }
        cur.className="hovered"
    }
});


dropDown.addEventListener("mouseover",function (e) {
    for( var i = 0,j; j = dropDown.getElementsByClassName("hovered")[i];i++)
        j.className = "";
    e.srcElement.className = "hovered";
});

Heres an example on JSFiddle

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском