首页 > 编程语言> > layui 监听input离开事件实现方法和代码

layui 监听input离开事件实现方法和代码

2024-09-20 09:38:01 作者：互联网

在 Layui 中，监听 input 字段的离开事件（也就是失去焦点 blur 事件）通常可以使用 jQuery 方法或者原生 JavaScript。以下是一些实现示例。

使用 jQuery 监听 Input 离开事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layui Input 离开事件示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
</head>
<body>
    <div class="layui-form" style="margin: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" id="username" class="layui-input" placeholder="请输入用户名">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" id="submit">提交</button>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            // 监听input字段的失去焦点事件
            $('#username').on('blur', function() {
                alert('您已离开用户名输入框');
            });

            // 提交按钮事件
            $('#submit').on('click', function() {
                alert('表单已提交');
            });
        });
    </script>
</body>
</html>

HTML

使用原生 JavaScript 监听 Input 离开事件

如果你更喜欢使用原生 JavaScript，以下是相同的功能实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layui Input 离开事件示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
</head>
<body>
    <div class="layui-form" style="margin: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" id="username" class="layui-input" placeholder="请输入用户名">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" id="submit">提交</button>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var usernameInput = document.getElementById('username');

            // 监听离开（失去焦点）事件
            usernameInput.addEventListener('blur', function() {
                alert('您已离开用户名输入框');
            });

            document.getElementById('submit').addEventListener('click', function() {
                alert('表单已提交');
            });
        });
    </script>
</body>
</html>

HTML

总结

以上示例展示了如何在 Layui 中监听 input 字段的离开事件。你可以根据个人喜好选择使用 jQuery 还是原生 JavaScript。通过这种方式，当用户在输入框中输入内容后离开时，你可以执行相应的逻辑，如数据校验或用户反馈等。

标签：
来源：