Question

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

$(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"

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

1 个答案: