將焦點放在容器中的第一個元素時的問題

我只是試圖在按Tab鍵時循環特定元素內的元素之間的焦點。我想要做的不是將焦點設置爲任何不是元素後代的元素，而是在元素內最後一個控件按下Tab時按下。那時焦點必須被設置爲容器內的第一個輸入元素。將焦點放在容器中的第一個元素時的問題

我做了一個示例，它不工作，我無法弄清楚這個問題。

樣品可以發現here

的完整源代碼

腳本

$(function(){ 
    $(":input:last","#div1").bind("keydown", function(e){ 
     if (e.keyCode === 9) 
     { 
      var firstElem = $(":input:first","#div1"); 
     firstElem.focus(); 
     } 
    }); 
});

CSS

input.red { width: 200px; border: solid 1px red; } 
input { width: 200px; }

HTML

<input type="text" class="red" /> 
<div id="div1"> 
    <input type="text" id="txt1" /> 
    <select id="sel1"> 
     <option>1</option> 
    </select> 
    <input type="text" id="txt2" /> 
</div>

任何幫助，將不勝感激。

感謝

編輯

謝謝大家。問題解決了。這是在keydown事件中缺少return false;聲明。

來源

2010-03-25 rahul

嘗試，而不是KEYDOWN

按鍵時

也返回false來設置該屬性。

看上去發生的事情是，你正在移動焦點，然後選項卡發生，將其移動到選擇。您需要設置焦點，然後返回false以便取消常規選項卡。

$(function(){ 
$(":input:last","#div1").bind("keydown", function(e){ 
    if (e.keyCode === 9) 
    { 
     var firstElem = $(":input:first","#div1"); 
     firstElem.focus(); 
     return false; 
    } 
});

}）;

來源

2010-03-25 14:24:33

不，它不工作。 – rahul 2010-03-25 14:26:07

感謝@Russel，'return false'訣竅 – rahul 2010-03-25 14:27:18

你不能只使用HTML中的tabindex屬性？

如果你的頁面是動態的，這樣的按鍵正常處理被取消，可能會更容易使用JS，而不是捕捉按鍵等

來源

2010-03-25 14:21:43 matpol

但是我會在後期解除這個'keydown'事件。所以我認爲使用'tabIndex'會影響容器外部的控件。 – rahul 2010-03-25 14:24:24

不，如果你設置它們，你需要他們與Jquery – matpol 2010-03-26 13:31:36

你的例子不工作，因爲你沒有停止擊鍵，你將焦點設置在第一個元素上，然後發送tab鍵，這導致焦點被改變爲第二個元素。

嘗試：

$(function(){ 
    $(":input:last","#div1").bind("keydown", function(e){ 
    if (e.keyCode === 9) { 
     var firstElem = $(":input:first","#div1"); 
     firstElem.focus(); 
     e.preventDefault(); // or return false; 
    } 
    }); 
});

檢查上面的例子here。

來源

2010-03-25 14:27:40 CMS

謝謝@CMS。它的工作現在。 – rahul 2010-03-25 14:31:24

不客氣的@rahul。 – CMS 2010-03-25 14:35:14

將焦點放在容器中的第一個元素時的問題

回答

相關問題