layui按下回车键提交表单

layui默认的提交表单的方式submit(filter)

layui.use(['form'],function () {
        var form = layui.form;
        form.on('submit(login)',function (data) {
            ajaxPost('/a/login',data.field,'/a/index')
        })
    })

layui提供的提交表单方式需要我们点击button才能提交表单,有时候我们需要按下回车键实现表单提交,但是layui文档却没有提供对应的代码,就连获取表单的值的方法form.val()也常常失灵

解决方法:添加form标签实现按下回车键提交表单

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登入 - 后台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{__LAYUI_CSS__}}/layui.css" media="all">
    <link rel="stylesheet" href="{{__LAYUI_STYLE__}}/admin.css" media="all">
    <link rel="stylesheet" href="{{__LAYUI_STYLE__}}/login.css" media="all">
</head>
<style>
    body{
        background-image: url({{__LAYUI__}}/images/login_bg.jpg);
        background-size: 100% 100%;
    }
</style>
<body>

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>欢迎登录后台系统</h2>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                <input type="text" lay-verify="required" name="name" id="LAY-user-login-username" placeholder="请输入名称" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                <input type="password" lay-verify="required" name="password" id="LAY-user-login-password" placeholder="请输入密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button lay-submit lay-filter="login" class="layui-btn layui-btn-fluid">登 陆</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="{{__LAYUI__}}/layui.js"></script>
<script src="{{__JS__}}/jquery.min.js"></script>
<script src="{{__JS__}}/myextend.js"></script>
<script>
    layui.use(['form'],function () {
        var form = layui.form;
        form.on('submit(login)',function (data) {
            ajaxPost('/a/login',data.field,'/a/index')
        })
    })
</script>
</html>

看了前端代码大家可以发现少了form标签,当我们在表单控件外围添加form标签的时候,按下回车键也是能触发submit(filter)事件的

找到带有layui-formclass的标签,在他下面添加form标签,并且设置阻止form表单的默认提交方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登入 - 后台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{__LAYUI_CSS__}}/layui.css" media="all">
    <link rel="stylesheet" href="{{__LAYUI_STYLE__}}/admin.css" media="all">
    <link rel="stylesheet" href="{{__LAYUI_STYLE__}}/login.css" media="all">
</head>
<style>
    body{
        background-image: url({{__LAYUI__}}/images/login_bg.jpg);
        background-size: 100% 100%;
    }
</style>
<body>

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>欢迎登录后台系统</h2>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <form onsubmit="return false;">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                    <input type="text" lay-verify="required" name="name" id="LAY-user-login-username" placeholder="请输入名称" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                    <input type="password" lay-verify="required" name="password" id="LAY-user-login-password" placeholder="请输入密码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <button lay-submit lay-filter="login" class="layui-btn layui-btn-fluid">登 陆</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="{{__LAYUI__}}/layui.js"></script>
<script src="{{__JS__}}/jquery.min.js"></script>
<script src="{{__JS__}}/myextend.js"></script>
<script>
    layui.use(['form'],function () {
        var form = layui.form;
        form.on('submit(login)',function (data) {
            ajaxPost('/a/login',data.field,'/a/index')
        })
    })
</script>
</html>

添加了form标签之后可以发现当我们按下回车键的时候,layui.form会主动触发submit(filter)方法

你可能感兴趣的:(前端,前端,layui,layui按下回车键提交表单)