在选择之前检测自动完成建议选项

Question

我有一个表单，当您输入输入时，'placeholder' 被隐藏。但是，当我有自动完成建议并且在我从下拉列表中选择一个选项之前悬停一个选项时，“占位符”就在那里，悬停的选项也在那里。当悬停带有建议的下拉选项时，是否可以隐藏“占位符”？

$(document).ready(function () {
    $('.form-control').on('input', function (e) {
        $('.placeholder').addClass('hiden');
    }).blur(function () {
        if (!$(this).val()) {
            $('.placeholder').removeClass('hiden');
        }
    });

    $('.form-control').on('input paste change keyup', function (event) {
        if (event.type == 'input') {
            console.log($(this).val());
        }
    });
});

form {
  max-width: 400px;
  margin: 40px auto;
}
.form-group {
    position: relative;
}
.form-group label {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    padding: 0;
    font-size: 13px;
    color: #d4d4d4;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:valid + label,
.form-group textarea:valid + label {
    top: -12px !important;
    left: 0;
    width: 100%;
    font-size: 11px;
    color: #33383e;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group input:valid,
.form-group textarea:valid {
    border-bottom: 1px solid #33383e; 
}
.placeholder {
    position: absolute;
    top: 10px;
    opacity: 0;
    z-index: -1;
    color: #d4d4d4;
    -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.placeholder.hiden {
    opacity: 0 !important;
}
.form-group input:focus ~ .placeholder,
.form-group textarea:focus ~ .placeholder,
.form-group input:valid ~ .placeholder,
.form-group textarea:valid ~ .placeholder {
    opacity: 1;
    z-index: 1;
    left: 2px;;
}
.form-control {
    padding: 6px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid #dddddd !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<form>
  <div class="form-group">
    <input type="text" name="email" class="form-control" required>
    <label class="control-label">Email:</label>
    <div class="placeholder">email@example.com</div>
  </div>
</form>

Answer 1

你可以这样：

<input 
type="text" 
placeholder="email@example.com" 
onfocus="this.placeholder = ''">

使用 CSS：

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

或者通过在你的输入标签中添加这个属性来关闭自动完成：

autocomplete="off"