Question

遇到一个似乎必须有一个非常简单的解决方案的问题，但我无法弄清楚我做错了什么。

方案：我有三个div类.subblock。一个内部有输入（文本），另外两个有选择。

目标：单击.subblock（div）时，请关注输入或选择输入。

代码（对选择不起作用）：

HTML

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@color/Grey_50"
    app:cardCornerRadius="0dp"
    app:cardUseCompatPadding="true"
    card_view:cardCornerRadius="dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image_news"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:scaleType="center" />

        <TextView
            android:id="@+id/txt_news_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/image_news"
            android:textSize="13sp" />
        <View
            android:id="@+id/view1"
            android:layout_below="@+id/image_news"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="10dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/recent"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_gravity="center"
                android:layout_marginRight="2dp"
                android:background="@drawable/ic_recent"
                android:textAlignment="center" />

            <TextView
                android:id="@+id/txt_timedate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toEndOf="@+id/recent"
                android:layout_toRightOf="@+id/recent"
                android:text="20:49"
                android:textColor="@color/Grey_600"
                android:textSize="16sp" />
        </LinearLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

JS

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

Answer 1

请尝试这个并告诉我它是否是你想要的：

（当您的选择具有焦点时，只需按键盘上的Space即可将其打开，或使用箭头键在可用选项中导航...）

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

JQuery：在单击父div时将焦点设置为select

1 个答案: