JavaScript:查找表单输入的第一个子项是否是输入框或选择下拉列表

Question

我正在尝试在表单上编写一个脚本，在 HTML 中搜索 DD 标记。当它找到标签时，我想检测 DD 标签中包含的第一个子元素是否是输入框或选择框，以及是否将焦点设置为其。一个页面上可能有多个 DD 标签，因此我只关心它的第一个实例。

本质上，我想做的是当页面加载时，它专注于页面上的第一个表单字段，以便用户可以直接输入数据，而无需单击框或下拉列表。我需要用纯 JS 编写逻辑(所以不要使用 JQuery 解决方案)，并适应给定页面是否有输入框作为第一个字段或选择框作为第一个字段。

JSFiddle:http://jsfiddle.net/3UqSq/

任何帮助都会很棒!

输入框的 HTML:

  <div class="container">
     <form class="myform">
       <fieldset>
          <dl>
            <dt><label for="input1">Label 1</label></dt>
            <dd>
               <input id="input1" type="text" value=""/>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
            <dt><label for="input2">Label 2</label></dt>
            <dd>
               <input id="input2" type="text" value=""/>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
         </dl>
       </fieldset>
     </form>
   </div>

选择框的 HTML:

  <div class="container">
     <form class="myform">
       <fieldset>
          <dl>
            <dt><label for="input1">Label 1</label></dt>
            <dd>
               <select id="input1">
                 <option>Option 1</option>
                 <option>Option 2</option>
                 <option>Option 3</option>
               </select>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
            <dt><label for="input2">Label 2</label></dt>
            <dd>
               <input id="input2" type="text" value=""/>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
         </dl>
       </fieldset>
     </form>
   </div>

Answer 1

将其包含在页面底部或加载后的脚本中:

​var dd = document.getElementsByTagName('dd')[0];

if (dd.children[0].tagName.toLowerCase() == 'select' ||
    dd.children[0].tagName.toLowerCase() == 'input') {
    dd.children[0].focus();
}

See demo