HTML5入力オートフォーカスが動作しない

Question

この場合、私はつまずく。入力フィールドの幅がボタン上で制御されているときにオートフォーカスが動作しない。それは、後方幅のアニメーションをトリガーするため、クリックの焦点は...どちらか

動作しない私はので、ここで私が何をしたかをお見せするためにcodepenだ、どこかの愚かな階層ミスを疑う：申し訳ありませんhttps://codepen.io/anon/pen/qPqXdp

私は怖いの基本的なトラブル...

.center { 
 
    margin: 0 auto; 
 
    width: 700px; 
 
} 
 

 
.search-wrap { 
 
    position: relative; 
 
} 
 

 
.search-button { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    right: 0; 
 
} 
 

 
.search-form { 
 
    height: 51px; 
 
    width: 0; 
 
    position: absolute; 
 
    right: 50px; 
 
    top: 0; 
 
    -webkit-transition: width 400ms ease; 
 
    transition: width 400ms ease; 
 
} 
 

 
.search-form .search-field { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.search-button:focus+.search-form { 
 
    width: 650px; 
 
    right: 50px; 
 
}

<div class="center"> 
 
    <div class="search-wrap"> 
 
    <button class="search-button">?</button> 
 
    <form class="search-form"> 
 
     <label> 
 
      <input type="search" class="search-field" autofocus/> 
 
     </label> 
 
    </form> 
 
    </div> 
 
</div>

Answer 1

autofocusプロパティはあなたの例では正常に動作します。問題は、ボタンをクリックすると、フォーカスがinputからbuttonに変更されることです。 では一度に1つの要素にしかフォーカスすることができないため、望むようにすることは不可能です。今、あなたはonclickを集中することができ

.center { 
 
    margin: 0 auto; 
 
    width: 700px; 
 
} 
 

 
.search-wrap { 
 
    position: relative; 
 
} 
 

 
.change-width { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    right: -10px; 
 
} 
 

 
.search-form { 
 
    height: 51px; 
 
    width: 0; 
 
    position: absolute; 
 
    right: 50px; 
 
    top: 0; 
 
    -webkit-transition: width 400ms ease; 
 
    transition: width 400ms ease; 
 
} 
 

 
.search-form .search-field { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#change:checked + .search-form { 
 
    width: 650px; 
 
    right: 50px; 
 
} 
 

 
#change { 
 
\t display: none; 
 
}

<div class="center"> 
 
    <div class="search-wrap"> 
 
    <label for="change" class="change-width">?</label> 
 
    <input id="change" type="checkbox"> 
 
    <form class="search-form"> 
 
     \t <label> 
 
      \t <input type="search" class="search-field" id="input"> 
 
     \t </label> 
 
    </form> 
 
    </div> 
 
</div>

：しかし、あなたは同じ結果を達成するために:checked疑似クラスを使用することができます。 autofocusはまだページのどこかをクリックすると（この場合はlabelにある）、キャンセルされます。