javascript - JQuery:单击父div时将焦点设置在选择上

正在努力解决一个看起来必须有一个非常简单的解决方案的问题，但我无法弄清楚我做错了什么。

场景: 我有 .subblock 类的三个 div。一个内部有一个输入(文本)，另外两个内部有一个选择。

目标: 单击 .subblock (div) 时，将焦点放在输入上或在其中进行选择。

代码(不适用于选择):

HTML

<div id="homeinputs">
    <form action="/listings/" method="GET">

        <div class="subblock" style="border-radius: 4px 0px 0px 4px;">
        <span>Where</span>
        <input id="autocomplete" name="location" type="text" placeholder="Location">
        </div>

        <div class="subblock" style="margin-left: -4px; margin-right: -4px;">
        <span>M<sup>2</sup></span>
        <select name="squarems">
            <option>All</option>
            <option>+10m<sup>2</sup></option>
            <option>+15m<sup>2</sup></option>
            <option>+20m<sup>2</sup></option>
            <option>+25m<sup>2</sup></option>                                   
            <option>+30m<sup>2</sup></option>
        </select>
        </div>

        <div class="subblock" style="border-radius: 0px 4px 4px 0px; box-shadow: 0px 1px 2px lightgrey;">
        <span>Price (&euro;)</span>
        <select name="pricings">
            <option>All</option>
            <option>450max.</option>
            <option>500max.</option>
            <option>550max.</option>                                    
            <option>600max.</option>
        </select>
        </div>


</div>

$(document).ready( function() {

   $('.subblock').click( function() {
       $(this).find('input').focus();
   });

   $('.subblock').click( function() {
       $(this).find('select').focus();
   });

});

最佳答案

请尝试一下并告诉我这是否是您想要的:

(当您的选择获得焦点时，只需按键盘上的空格即可将其打开或使用箭头键在可用选项中导航...) p>

$(document).ready(function() {

  $('.subblock').click(function() {
    $(this).children().eq(1).focus();
  });

});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Focus</title>
</head>
<body>
  <div id="homeinputs">
    <form action="/listings/" method="GET">
      <div class="subblock" style="border-radius: 4px 0px 0px 4px;">
        <span>Where</span>
          <input id="autocomplete" name="location" type="text" placeholder="Location">
      </div>

       <div class="subblock" style="margin-left: -4px; margin-right: -4px;">
         <span>M<sup>2</sup></span>
         <select name="squarems">
           <option>All</option>
           <option>+10m<sup>2</sup></option>
           <option>+15m<sup>2</sup></option>
           <option>+20m<sup>2</sup></option>
           <option>+25m<sup>2</sup></option>
           <option>+30m<sup>2</sup></option>
         </select>
        </div>

        <div class="subblock" style="border-radius: 0px 4px 4px 0px; box-shadow: 0px 1px 2px lightgrey;">
          <span>Price (&euro;)</span>
          <select name="pricings">
            <option>All</option>
            <option>450max.</option>
            <option>500max.</option>
            <option>550max.</option>
            <option>600max.</option>
          </select>
        </div>
    </form>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

关于javascript - JQuery:单击父div时将焦点设置在选择上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43419240/

javascript - JQuery:单击父div时将焦点设置在选择上

上一篇：javascript - 如何制作多个播放按钮？

下一篇：javascript - 面积图上的 nvd3 方向轴