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

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>

在不添加任何类或 ID 的情况下，当表单打开时，我可以专注于第一个表单元素吗？

Answer 1

我们 <th> 标签可以包裹您的标签吗？

那么你可以使用

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

虽然有点啰嗦，但如果 child 是输入，select 或其他任何东西（textarea 等）

Answer 2

你可以试试

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

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

http://jsfiddle.net/chkfgfwy/

Answer 3

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

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

:input 过滤标签 <input>、<textarea> 和 <select>

:hidden 过滤任何在 display:none 和 type="hidden"

中不可见的标签

Answer 4

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

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

Answer 5

我建议：

// 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();

// 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();

<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>

参考文献：

JavaScript:
- Math.random().
- Math.floor.
jQuery:
- eq().
- focus().
- html().

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

Focus on first form element, whatever it may be. jQuery dialog

javascript

forms

jquery

jquery-ui