ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2024-09-20 09:38:01  阅读:39  来源: 互联网

标签:


在 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。通过这种方式,当用户在输入框中输入内容后离开时,你可以执行相应的逻辑,如数据校验或用户反馈等。

标签:
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有