<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layui 输入框带清空图标</title>
<link rel="stylesheet" type="text/css" href="https://cdn.uv.cc/layui/2.9.14/css/layui.css" />
<script src="https://cdn.uv.cc/layui/2.9.14/layui.js"></script>
<style>
.input-wrapper {
position: relative;
}
.clear-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
}
</style>
</head>
<body>
<div class="layui-input-block input-wrapper">
<input type="text" id="username" class="layui-input" placeholder="请输入用户名">
<i class="layui-icon clear-icon" id="clearIcon">ဆ</i> <!-- 清空图标 -->
</div>
<script>
layui.use(['jquery'], function(){
var $ = layui.jquery;
// 清空输入框的内容
$('#clearIcon').on('click', function(){
$('#username').val(''); // 清空输入框内容
});
// 当输入框有内容时显示清空图标，输入框为空时隐藏图标
$('#username').on('input', function() {
var value = $(this).val();
if (value) {
$('#clearIcon').show(); // 显示清空图标
} else {
$('#clearIcon').hide(); // 隐藏清空图标
}
});
// 页面加载时检查输入框是否有内容，来决定是否显示清空图标
if ($('#username').val()) {
$('#clearIcon').show();
} else {
$('#clearIcon').hide();
}
});
</script>
</body>
</html>
layui 输入框带清空图标
一次购买，永久免费
去创作
评论
{{item.path.join('.')}}
{{item.item.name}}