Focus first text field using jQuery

When it comes to focus the first text field on a page using jQuery , the usual solution would be:

JavaScript:

$(“:text:visible:enabled:eq(0)”).focus();

This query means to find the first of input text field(s), which is/are visible and enabled. However, this would also extract text field(s) which is/are under a display:none parent(s). So a more complete way would be:

PLAIN TEXT

JavaScript:

$(“:text:visible:enabled”).filter(function(){
return $(this).parents(“:hidden”).size()==0;
}).slice(0,1).focus();

The filter here would try to determine if the text field is a descendant of a hidden ancestor. The usage of slice(0,1) instead of get(0) is to keep the chainability. A test page is put up here .

Finally, you may wrap it up with a plugin:

PLAIN TEXT

JavaScript:

(function($){
$.fn.focusFirstField = function(){
$this = this;
$this.find(“:text:visible:enabled”).filter(function(){
return $(this).parents(“:hidden”).size() == 0;
}).slice(0,1).focus();
return this;
}
})(jQuery)

So that you can do this:

PLAIN TEXT

JavaScript:

$(“#form1,#form2”).focusFirstField(); //form1 or form2 may be ‘hidden’ dynamically

I just wonder if there is any ‘selector-only’ solution for this?

Update: It turns out that the child’s visiblity would override parent’s visibility. So the filter should only check display none:

PLAIN TEXT

JavaScript:

$(":text:visible:enabled").filter(function(){
return $(this).parents.filter(function(){
return this.style.display == "none"; })
.size()==0;
}).slice(0,1).focus();

I’ve updated the demo page .

發表日期： Monday, April 14th, 2008
發表時間： 12:03 AM
分類：電腦
文章 RSS：RSS 2.0
留言：開放留言
Trackback：開放
Tags: javascript, jquery, programming

相關文章
- jQuery validation 的 addMethod (3)
- 對 Javascript 的誤解 (5)
- 取全文油猴更新 - 加入圖示 (1)
- 修改使用 Snap Preview (5)
- Javascript 一路走來 (0)

“Focus first text field using jQuery” - 7 個回應

小影說:
用 prototype 的話我會這樣：
```
 Event.observe(window, 'load', function() {
	try{
		($$('form')[0]).focusFirstElement();
	} catch (e) {}
 });
```
( 在page load 完後才 focus )

發表於 14-Apr-08 9:23 am | 永久連結
小影說:
呃… 上面 [ 0 ] 變了 [0]

發表於 14-Apr-08 9:24 am | 永久連結
Jacky 說:
Can this function handle when
1) style=“display:none” on the input?
2) the form itself is under a div with display:none?

發表於 14-Apr-08 9:46 am | 永久連結
anonymous 說:
Why slice() instead of eq()?

http://docs.jquery.com/Core/eq#position

發表於 14-Apr-08 10:34 am | 永久連結

小影說:


  findFirstElement: function(form) {
    var elements = $(form).getElements().findAll(function(element) {
      return 'hidden' != element.type && !element.disabled;
    });
    var firstByIndex = elements.findAll(function(element) {
      return element.hasAttribute('tabIndex') && element.tabIndex &gt;= 0;
    }).sortBy(function(element) { return element.tabIndex }).first();
    return firstByIndex ? firstByIndex : elements.find(function(element) {
      return ['input', 'select', 'textarea'].include(element.tagName.toLowerCase());
    });
  },
  focusFirstElement: function(form) {
    form = $(form);
    form.findFirstElement().activate();
    return form;
  }

form 或 form 上層的 elements 是 hidden … 是不行的

發表於 14-Apr-08 10:42 am | 永久連結

Jacky 說:
anonymous: yes, can use eq() also.

小影: that’s my interest… multiple forms, which may be ‘hidden’

發表於 14-Apr-08 11:39 am | 永久連結
Jacky 說:
BTW, eq() also uses slice()

發表於 14-Apr-08 12:21 pm | 永久連結

網絡暴民 Jacky’s Blog

Focus first text field using jQuery

相關文章

“Focus first text field using jQuery” - 7 個回應

回覆