jquery - 显示和隐藏焦点

Question

我有一些输入框，我希望只有当它被选中以输入信息时，消息才会出现在输入框下方。不是我所有的输入框只有几个。我只能让错误工作，但假设用户选择了用户名框，我希望在其下方显示一条消息，说明用户名不能包含任何字符，然后当他们离开时它会隐藏。

这是一个选择用户名字段的例子 https://login.mailchimp.com/signup/

<div class="col-lg-12">
        <label>Username</label>
        <input type="text" class="form-control">
        <div class="field-help"> Choose a username that contains only letters and numbers, or use your email address. </div>
</div>

Answer 1

如果有多个 form-control，你需要这样的东西:

编辑: 将 show() 替换为 slideDown() 并将 hide() 替换为 slideUp()

jQuery(function($) {
$('.form-control')
    //.on('focus', function() { $(this).siblings('.field-help').show(); })
    .on('focus', function() { $(this).siblings('.field-help').slideDown(); })
    //.on('blur', function() { $(this).siblings('.field-help').hide() })
    .on('blur', function() { $(this).siblings('.field-help').slideUp() })
    // initialize the hidden state at program start
    .siblings('.field-help').hide();
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="col-lg-12">
    <label>Username</label>
    <input type="text" class="form-control">
    <div class="field-help"> Choose a username that contains only letters and numbers, or use your email address. </div>
</div>
<div class="col-lg-12">
    <label>Password</label>
    <input type="password" class="form-control">
    <div class="field-help"> It's allways good to have one. </div>
</div>