FOF设置输入框有内容为√未输入为×

admin

<!文档类型 网页类型>
<网页 语言代码="zh-CN">
    <网页头部>
        <网页信息 文档编码="UTF8" />
        <网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度, 初始缩放值=1.0" />
        <网页标题>表单输入框状态示例</网页标题>
        <!-- 引入 Layui 的 CSS 和 JS -->
        <加载样式库 文档关系="导入样式库" 链接地址="https://cdn.layui.com/layui/2.8.0/css/layui.css" />
        <脚本 脚本文件="https://cdn.layui.com/layui/2.8.0/layui.js"></脚本>
        <样式>
            .input-container {
                定位: 相对定位;
                下边距: 20px;
            }
            .input-container 数据框 {
                右内边距: 30px; /* 为图标留出空间 */
            }
            .input-container .icon {
                定位: 绝对定位;
                右侧: 10px;
                顶部: 50%;
                转换: 平移y轴(-50%);
                字体-大小: 16px;
            }
            .input-container .icon.lay-图标OK {
                颜色: green;
            }
            .input-container .icon.lay-图标线性关闭 {
                颜色: red;
            }
        </样式>
    </网页头部>
    <网页主体>
        <区块 类名="lay-表单" 行内样式="内边距: 20px">
            <!-- 输入框容器 -->
            <区块 类名="input-container">
                <数据框 数据类型="文本输入" id="inputField" 类名="lay-输入框" 默认提示="请输入内容" />
                <!-- 图标 -->
                <斜体文本 id="statusIcon" 类名="icon lay-图标 lay-图标线性关闭"></斜体文本>
            </区块>
        </区块>

        <脚本>
            layui.use(["form"], 定义函数 () {
                常量 form = layui.form;
                常量 $ = layui.$;

                // 获取输入框和图标元素
                常量 inputField = document.getElementById("inputField");
                常量 statusIcon = document.getElementById("statusIcon");

                // 监听输入框内容变化
                inputField.addEventListener("input", 定义函数 () {
                    如果 (inputField.value.删首尾空() !== "") {
                        // 如果有内容，显示绿色√
                        statusIcon.className = "icon layui-icon layui-icon-ok";
                    } 否则 {
                        // 如果无内容，显示红色×
                        statusIcon.className = "icon layui-icon layui-icon-close";
                    }
                });
            });
        </脚本>
    </网页主体>
</网页>