Jump to content
  • 0

Событие keydown на select'е всплывает через раз

Great Rash

Asked by Great Rash,

 Share

Question

Great Rash Explorer

Great Rash

Posted
Posted

Не знаю как в других браузерах, но в Chrome событие keydown на селекте срабатывает через раз. Вот пример. Что надо сделать, чтоб увидеть баг:

 

1) добиться чтобы селект получил фокус (табом или мышой встать в него)

2) нажимаем Enter (выпадающее меню будет открываться/закрываться)

3) событие будет всплывать только когда меню открывается, но не когда закрывается

 

Вопрос: как можно это победить, как отловить событие в обоих случаях?

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
Veseloff Explorer

Veseloff

Posted
Posted

Боюсь, что никак. Суть в том, что даже если брать keydown по document, то при открытом селекте ничего не происходит. Я когда-то бодался с подобной штукой в IE — там всё ещё хуже, этот селект чуть ли не «системный» и срдствами браузера его победить было невозможно, причём сам селект был в порядке, а вот его «внутренности» — нет. У фаерфокса поведение иное и в нём всё относительно нормально работало всегда.

Link to comment
Share on other sites
  • 0
nerv Explorer

nerv

Posted
Posted (edited)

Great Rash, а зачем тебе keydown на селекте?

Ох уж этот селект... меня бы даже change устроил, но и он, зараза, не срабатывает если выбран тот же пункт.

логично, ведь изменения не было =)

На мой взгляд все, что нужно разработчику от селекта - это выбранное значение. Его можно отследить по change/input.

Edited by nerv
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
  • Author
Posted

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


Great Rash, а зачем тебе keydown на селекте?

А затем, что я делаю кастомный селект, и мне надо по нажатию Enter вызывать toggleClass() у моего селекта.

Суть такова, что мой кастомный селект - это лишь визуальная обвязка, а вся реальная работа (с клавы, с мыши) происходит с реальным селектом, который просто спрятан (left: -9999px;). Т.е. фокус на реальном селекте, а юзер видит сгенерированный скриптом. Но наткнулся вот на такую проблему.
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
  • Author
Posted

Нет, ибо мне нужна работоспособность в ИЕ7, а ещё, внимание-внимание... в Quirks Mode. В общем-то, прежде чем садиться писать свой плагин, я поизучал рынок ибо я не мазохист.

Link to comment
Share on other sites
  • 0
nerv Explorer

nerv

Posted
Posted
ибо я не мазохист

мне видится обратное. На сегодняшний день писать что-то под IE<9 и тем более Quirks Modes... зачем?

Даже если представить, что ты сделаешь это, какие-нибудь другие фичи не будут работать в IE<9(10). В итоге ты придешь к "graceful degradation"

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
  • Author
Posted

мне видится обратное. На сегодняшний день писать что-то под IE<9 и тем более Quirks Modes... зачем?

Наверное не потому, что мне так захотелось. Раз делаю значит нужно. Не вижу смысла тут разводить дискуссию о том имеет ли смысл верстать под ИЕ<9.

 

Даже если представить, что ты сделаешь это, какие-нибудь другие фичи не будут работать в IE<9(10). В итоге ты придешь к "graceful degradation"

Никаких деградаций, всё должно выглядеть одинаково во всех браузерах.
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
  • Author
Posted

JohnDoe, спасибо вам за отличную наводку. Я поразмыслил над вашим сообщением, и это навело меня на отличную мысль: действительно, надо просто запретить дефолтно открываться выпадающему меню, тогда событие начинает отлавливаться нормально.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
  • Author
Posted

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

Это не так кстати, еще нужно знать и уметь правильно использовать tabindex. Переходить к следующему/предыдущему элементу по табу - это одна из важнейших фич в любых формах. Именно поэтому я не прячу совсем оригинальный селект. Потому что скролл в браузере должен прыгать к элементу формы, получившему фокус.
Link to comment
Share on other sites
  • 0
nerv Explorer

nerv

Posted
Posted
Это не так кстати, еще нужно знать и уметь правильно использовать tabindex. Переходить к следующему/предыдущему элементу по табу - это одна из важнейших фич в любых формах.

по моей ссылке выше это есть. А еще тебе придется устранять баги мобильных и не только браузеров =) 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Marina_dolya
      select обрезается буквы
      By Marina_dolya
      Добрый день. 
      Помогите решить проблемку. В chrom и Opera
      <select>
      <option>100g</option>
      </select>
      у g обрезаeтся хвостик. 
       
    • Wile E
      Проблема с тегом select
      By Wile E
      Здравствуйте, дорогие форумчане. Я - новичок самоучка, поэтому для вас проблема может быть не очень сложная.
      Мне нужно сделать выпадающий список, как на рисунке. Интересует меня то, как сделать такие оглавления, как на изображении ("по сторам", "по товару"), чтоб они не выпадали вместе с option. 
      Простите, если не совсем понятно и корректно выражаюсь!

    • d0ublezer0
      Не срабатывает on("click", function) для динамического элемента
      By d0ublezer0
      В корзине динамически формируется выбор вариантов доставки, из которого должен выбираться пункт выдачи. но событие клика на варианте доставки не срабатывает
      для проверки работы нужно что-то положить в корзину, например https://www.road.media/avtomagnitoly/ford/5861-detail
      собственно, корзина: https://www.road.media/cart
      После клика на первом варианте (пункт выдачи СДЕК), должен раскрыться список пунктов выдачи (город у каждого будет свой, определяется автоматически по России):

      За раскрытие списка и обработку дальнейшего выбора пункта выдачи отвечает файл https://www.road.media/plugins/vmshipment/transportadoras/cdek_script.js
      Выглядит он так:
      jQuery(document).ready(function ($) { $('.cdek_shipment').on("click", function () { var $ship_id = $(this).attr("data-id"); var $ship_pvz = $(this).attr("data-pvz"); var $ship_map = $(this).attr("data-map"); console.log('Выбран вариант доставки'); $(this).first(".cdek_outpost_list").slideToggle(); }); var $notator = $("#customer_note_field"); var $pvz_map = $("#map"); $(".cdek_outpost_list input").on("change", function () { var $pvz = $(this); console.log('PVZ выбран'); $notator.empty().append("Заберу по адресу:" + $pvz.attr("data-address")); if ($pvz_map.length > 0) { // карта существует, предполагаем что можем выводить в нее console.log("map exists"); } }); }); .cdek_shipment создаётся другим скриптом уже после загрузки страницы, я на это повлиять не могу.
      Более того, каждый раз при смене города, блок с вариантами доставки создаётся заново.
      Где я ошибся? Помогите разобраться, пожалуйста.
      UPD:
      Нашел как перенавесить событие. теперь другой вопрос
      $("#ajaxshipping").on("click", '.cdek_shipment', function () { // как тут получить объект .cdek_shipment для манипуляций? )};  
    • ivanm
      Выравнивание колонок в SELECT
      By ivanm
      <select> <option disabled>Имя  Фамилия  №телефона</option> <option>Андрей Мартыненко 123456789</option> <option>Кирил Богун 123321456</option> <option>Игорь Лях  258852123</option> </select> выводит:
      Имя  Фамилия  №телефона
      Андрей Мартыненко 123456789
      Кирил Богун 123321456
      Игорь Лях  258852123
      а нужно с выравниванием каждой колонки:
      Имя       Фамилия        №телефона
      Андрей  Мартыненко  123456789
      Кирил    Богун              123321456
      Игорь    Лях                  258852123
      пока спасаюсь анализом длины в php скрипте и добавлением &nbsp; тоесть своей функцией выравнивания,
      но может есть более простой метод, HTML5 свойство, или CSS
    • kattiperk
      Кастомный селект с кастомным скроллом
      By kattiperk
      Здравствуйте.
      Подскажите хороший плагин кастомного селекта и таким же кастомным скроллом. Желательно 2 в 1. Ну или посоветуйте, как объединить.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept