Question

我有一个带有一个图标的输入。我想要：

当我点击输入的图标以获得焦点时
当我点击输入的图标以获得焦点时

对于第一名，我写了这段代码而第二号我不知道该怎么做

$(".top-search i").click(function(){
    document.getElementById("input-search").focus();
});

<div class="top-search">
    <form>
        <input id="input-search" type="text" name="search" placeholder="Type + Enter"/>
        <i class="ion-ios-search"></i>
    </form>
</div>

Answer 1

您可以使用模糊来取消对焦输入。像这样：

$(".top-search i").click(function(){
   $("#input-search").blur();
});

Answer 2

更新：现在我知道你的意思，工作版本：

let hasFocus = false; /* set state variable */
$(".top-search i").click(function() {
    const setState = hasFocus ? 'blur' : 'focus';
    $('#input-search')[setState]();
    hasFocus = !hasFocus; /* reverse current state */
});

.ion-ios-search {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-search">
    <form>
        <input id="input-search" type="text" name="search" placeholder="Type + Enter" />
        <i class="ion-ios-search">Click Me</i>
    </form>
</div>

Answer 3

$(".top-search i:focus").click(function(){
    document.getElementById("input-search").blur();
});

我有一个输入，我想按下按钮以使输入获得焦点

3 个答案: