选中隐藏元素中的输入 [英] Tab into an input within a hidden element

问题描述

我正在开发一个场景，用户可以在隐藏元素中选择一个输入。当该输入被聚焦时，我希望它的父元素，隐藏元素，使用jQuery显示。到目前为止，我似乎无法让它工作。

这就是我的HTML的样子：

 < div class =select> 
< input tabindex =1type =textname =searchclass =addressid =address-1placeholder =Tab to next input。> 
< div class =dropdown> 
< div class =dropdown-search> 
< input tabindex =2type =textname =searchclass =searchid =dropdown-search-1placeholder =Type to search ...> 
< / div> 
< / div> 
  

和jQuery：<每一个（function（）{
var dropdown = $（'。dropdown'） ，这），
search = $（'。search'，this）;

search.focus（function（）{
dropdown.show（）;
}）;
}）;

我还把我的代码放在这里：< a href =http://jsfiddle.net/ae26u/1/ =nofollow> http://jsfiddle.net/ae26u/1/

解决方案

解决这个问题的一个技巧是将元素隐藏在屏幕之外，而不是实际隐藏在DOM之外。

如果它隐藏在屏幕外，它仍然是绘制的，所以你可以选中它，然后在标签上将它移回屏幕。

jQuery：

  $（'。select'）。each（function（）{
 var dropdown = $（'。dropdown'，this ），
 search = $（'。address'，this）; 
 
 dropdown.focus（func （）{
 console.log（'show'）; 
 dropdown.css（left，0px）
}）; 
}）; 
  

Html：

 < div class =select> 
< input tabindex =1type =textname =searchclass =addressid =address-1placeholder =Tab to next input。>< br / > 
< input tabindex =2type =textname =searchclass =dropdownid =dropdown-search-1placeholder =Type to search ...> 
< / div> 
  

jsFiddle示例： http://jsfiddle.net/ae26u/7/

I'm working on a scenario in which the user would tab into an input within a hidden element. When that input is focused, I want it's parent, the hidden element, to show using jQuery. So far, I can't seem to get this to work.

This is what my HTML looks like:

<div class="select">
<input tabindex="1" type="text" name="search" class="address" id="address-1" placeholder="Tab to the next input.">
<div class="dropdown">
    <div class="dropdown-search">
        <input tabindex="2" type="text" name="search" class="search" id="dropdown-search-1" placeholder="Type to search...">
    </div>            
</div>

​

and the jQuery:

$('.select').each(function() {
    var dropdown = $('.dropdown', this),
        search = $('.search', this);

    search.focus(function() {
        dropdown.show();
    });
});​

I've also put my code here: http://jsfiddle.net/ae26u/1/

解决方案

A trick to get around this would be to have the element hidden off screen, rather than actually hidden from the DOM.

If it's hidden off screen it's still "drawn" so you could tab into it, and then on tab move it back onto screen.

jQuery:

$('.select').each(function() {
    var dropdown = $('.dropdown', this),
        search = $('.address', this);

    dropdown.focus(function() {
        console.log('show');
        dropdown.css( "left", "0px" )
    });
});​

Html:

<div class="select">
    <input tabindex="1" type="text" name="search" class="address" id="address-1" placeholder="Tab to the next input."><br />
    <input tabindex="2" type="text" name="search" class="dropdown" id="dropdown-search-1" placeholder="Type to search...">
</div> 

jsFiddle example: http://jsfiddle.net/ae26u/7/

这篇关于选中隐藏元素中的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！