Question

正如标题所说，我试图弄清楚如何根据输入字段是否有焦点来显示元素。

因此，当特定输入字段具有焦点时，我需要显示一个元素，当它没有焦点时，该元素应该被隐藏。

我尝试了很多不同的事情，这是我的尝试：

    <script>
     $(".only-oslo-delivery").hide();

     if ($("#address_city").is(":focus")) {
      $(".only-oslo-delivery").show();
     };
    </script>

only-oslo-delivery是＆lt; p>当输入字段具有焦点时，我想要显示的文本标记。

address_city是输入字段的ID。

Answer 1

您的代码只运行一次，您需要事件处理程序来根据用户操作执行它：

＆＃13;

$("#address_city").on('focus', function() {
  $(".only-oslo-delivery").show();
}).on('blur', function() {
  $(".only-oslo-delivery").hide();
})

＆＃13;

.only-oslo-delivery {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address_city">
<p class="only-oslo-delivery">test</p>

＆＃13;

Answer 2

您可以将事件绑定到按钮，以便在焦点和模糊时显示/隐藏.only-oslo-delivery元素。

$('#address_city').focus(function() {
  $('.only-oslo-delivery').show();
}).blur(function() {
  $('.only-oslo-delivery').hide();
});

有趣的是，如果元素在页面上彼此相邻，则可以使用相邻的css规则来实现此目的，而无需任何JavaScript。

<input type="text" id="address_city">
<p class="only-oslo-deliver">...</p>

然后使用以下css：

.only-oslo-delivery {
   display: none;
}
#address_city:focus~.only-oslo-delivery {
   display: block;
}

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address_city">
<p class="only-oslo-delivery">test</p>

.only-oslo-delivery {
  display: none;
}

$("#address_city").on('focus', function() {
  $(".only-oslo-delivery").show();
}).on('blur', function() {
  $(".only-oslo-delivery").hide();
})

Answer 4

您需要使用focus事件来显示并blur隐藏：

$("#address_city").on('focus blur', function(e) {
  $(".only-oslo-delivery").toggle($('#address_city').is(':focus') && e.type === 'focus');
});

.only-oslo-delivery {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='address_city'>
<p class='only-oslo-delivery'>only-oslo-delivery</p>

.toggle(true/false)会在true时显示，并在false时隐藏。

Answer 5

这是另一种方式：

var $field = $('#address_city');
var $info = $('.only-oslo-delivery').hide();

$field.on('focus blur', function (e) {
  $info.toggle(e.type === 'focus');
});

尝试根据特定输入字段是否具有焦点来显示元素

5 个答案: