当鼠标停留再输入框时,输入框下面出现白框,里面提示并实时更新
时间: 2024-02-27 20:51:29 浏览: 14
这种效果可以通过 LayUI 的 form 模块实现,具体实现步骤如下:
1. 在 HTML 中定义一个输入框:
```
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="input" placeholder="请输入" autocomplete="off" class="layui-input" id="input">
<div class="layui-form-mid layui-word-aux" id="input-tip"></div>
</div>
</div>
```
2. 在 JavaScript 中使用 LayUI 的 form 模块初始化表单,并绑定输入框的 focus 和 blur 事件:
```
layui.use(['form'], function(){
var form = layui.form;
// 初始化表单
form.render();
// 绑定输入框的 focus 事件
$('#input').on('focus', function(){
$('#input-tip').addClass('layui-form-mid layui-word-aux layui-show').html('请输入内容');
});
// 绑定输入框的 blur 事件
$('#input').on('blur', function(){
$('#input-tip').removeClass('layui-show');
});
});
```
3. 在 CSS 中定义一个样式类,用于控制提示框的样式:
```
.layui-show {
display: block !important;
}
```
这样,当用户将鼠标停留在输入框上时,下方会出现一个白色提示框,并实时更新提示内容。当用户将鼠标移出输入框时,提示框会隐藏。你可以根据需要修改提示框的样式和内容。