Как я могу поймать попытку сосредоточиться на скрытом объекте?

Question

Я создал расширения jquery, которые скрывают мои элементы выбора и вместо этого добавляет пользовательскую разметку. Это так, что я могу укладывать элементы и выполнять некоторые пользовательские behvaiour (например, добавление изображений к элементам)

Это то, что разметка будет выглядеть в простом примере:

<select id="original" style="display:none"><option value="1">1</option><select> 
<ul id="new" class="select"> 
    <li>1</li> 
</ul> 

Я также использовать другой jquery-extension для проверки форм. Если поле недействительно, оно пытается сфокусировать это поле. Браузеры не позволят сосредоточиться на скрытых полях. Это проблема в основном потому, что если поле не сфокусировано, браузер не будет прокручиваться до места, где это недопустимое значение.

Моим решением для сновидений было бы добавить слушателя для попыток сфокусировать элемент select, но я не могу использовать обычный $('parent').on('focus', "#original ...), потому что события не запускаются на display:none -объектах. Я также считал, что скрывать элемент каким-то другим способом, но по крайней мере visbility: hidden также не позволит фокусироваться.

Как сфокусировать либо оригинал, либо новый элемент? Когда делается попытка сфокусировать исходный элемент?

Answer 1

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

Я придумал обходным:

1. Добавить вход закадровым и скрытый класс:
   HTML:<input id="I0">
   CSS:#I0, .hidden {position: absolute; left: -999px;}

2. Включите этот вход в начале всех вызовов фокуса:
   $('#I0, #Name').focus();

3. Добавьте этот код:
   

---

$('input, select').focus(function() { 
    if($(this).data('invisible')) { 
    //this will be run if the element is hidden 
    } 

    $('input, select').each(function() { 
    $(this).data('invisible', !$(this).is(':visible')); 
    if($(this).data('invisible')) { 
     $(this) 
     .show() 
     .addClass('hidden'); 
     (function(self) { 
     setTimeout(function() { 
      self 
      .hide() 
      .removeClass('hidden'); 
     },0); 
     })($(this)); 
    } 
    }); 

}); 

Working Fiddle