Question

我有一个jQuery模式对话框，当它打开时我希望它专注于第一个表单元素。

目前我有这个：

the_dialog.dialog({ 
        modal: true, 
        width: 700,
        title: 'title',
        close: suicide ,
        open: function(event, ui) { 
                setTimeout(function() {
                    jQuery('#').focus(); <-- VERY SPECIFIC CSS SELECTOR PERHAPS?
                }, 220);     
            } 
    }
);

我的问题是，我的应用程序中的几个不同位置调用了此对话框，第一个表单元素有时可能是input，有时也可能是select。

表单的布局始终相同，只有第一个表单元素可能会发生变化。

<table>
    <tbody>
        <tr>
            <td>LABEL</td>
            <td>FIRST FORM ELEMENT</td>
        </tr>
        <tr>
            <td>LABEL</td>
            <td></td>
        </tr>
        <tr>
            <td>LABEL</td>
            <td></td>
        </tr>
        <tr>
            <td>LABEL</td>
            <td></td>
        </tr>
    </tbody>
</table>

在不添加任何CLASS或ID的情况下，当表格打开时，我可以专注于FIRST FORM ELEMENT，无论它是什么？

Answer 1

你可以尝试

jQuery('input,select').first().focus();

关于注释，您应该将其范围限定为仅适用于对话框，例如

http://jsfiddle.net/chkfgfwy/

Answer 2

可以在开放回调中使用psuedo :input选择器并查找第一个非隐藏元素

open: function(event, ui) { 
       the_dialog.find(':input:not(:hidden):first').focus()     
 }

:input过滤了标记<input>，<textarea>和<select>

:hidden过滤了display:none以及type="hidden"

中无法看到的所有标签

Answer 3

您可以使用:input选择器查找对话框中的第一个表单元素：

the_dialog.find(':input:first').focus()

Answer 4

我建议：

// I'm assuming that <textarea> elements may be used, they can be removed if not;
// 'dialog' is an assumed reference to a jQuery object containing the relevant <table>:
dialog.find('input, select, textarea')
  // retrieving the first element matched by the selector:
  .eq(0)
  // focusing that found element:
  .focus();

＆＃13;

// this part is entirely irrelevant, and used only to vary the "first form element",
// in order to demonstrate the approach working, regardless of which element is 'first':
var formElements = ['<input />', '<select></select>', '<textarea></textarea>'];

$('td:nth-child(2)').html(function(i) {
  return $(formElements[Math.floor(Math.random() * formElements.length)]).val(i);
});

// the relevant part (explained above):
$('input, select, textarea').eq(0).focus();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>LABEL</td>
      <td></td>
    </tr>
    <tr>
      <td>LABEL</td>
      <td></td>
    </tr>
    <tr>
      <td>LABEL</td>
      <td></td>
    </tr>
    <tr>
      <td>LABEL</td>
      <td></td>
    </tr>
  </tbody>
</table>

＆＃13;

参考文献：

JavaScript的：
- Math.random()。
- Math.floor。
jQuery的：
- eq()。
- focus()。
- html()。

Answer 5

是否可以使用<th>标签来包装标签？

然后你可以使用

$('table').find('td').eq(0).children().eq(0).focus()

虽然它有点长，但如果孩子是输入，选择或其他任何东西（textarea等）将起作用

专注于第一个表单元素，无论它是什么。 jQuery对话框

5 个答案: