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

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"