<div class="layui-input-wrap" style="width: 200px;"> <input type="text" name="username" value="默认有值状态" class="layui-input"> </div> 如何给在获取焦点时 给input标签加上 lay-affix="clear"
时间: 2023-07-06 15:04:09 浏览: 169
你可以使用 jQuery 在 input 获取到焦点时动态添加 `lay-affix="clear"` 属性。例如:
```html
<div class="layui-input-wrap" style="width: 200px;">
<input type="text" name="username" value="默认有值状态" class="layui-input" id="username-input">
</div>
```
```javascript
$(document).ready(function() {
$("#username-input").focus(function() {
$(this).attr("lay-affix", "clear");
});
});
```
这样当 input 获取到焦点时,就会自动添加 `lay-affix="clear"` 属性。
相关问题
<body> <style> .demo-login-container{width: 320px; margin: 21px auto 0; margin-top: 10%} </style> <form class="layui-form" > <div class="demo-login-container"> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button> </div> </div> </form> <!-- 请勿在项目正式环境中引用该 layui.js 地址 --> <script> layui.use(function(){ var form = layui.form; var layer = layui.layer; // 提交事件 form.on('submit(demo-login)', function(data){ var field = data.field; // 获取表单字段值 // 显示填写结果,仅作演示用 layer.alert(JSON.stringify(field), { title: '当前填写的字段值' }); // 此处可执行 Ajax 等操作 // … return false; // 阻止默认 form 跳转 }); }); </script> </body>在上面的代码中需要添加一行文字:高压氧和一张自定义的图片A
<body> <style> .demo-login-container{width: 320px; margin: 21px auto 0; margin-top: 10%} </style> <form class="layui-form" > <div class="demo-login-container"> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button> </div> </div> <p>高压氧</p> <!-- 添加高压氧文字 --> <img src="https://example.com/custom-image.jpg"> <!-- 添加自定义图片 --> </form> <!-- 请勿在项目正式环境中引用该 layui.js 地址 --> <script> layui.use(function(){ var form = layui.form; var layer = layui.layer; // 提交事件 form.on('submit(demo-login)', function(data){ var field = data.field; // 获取表单字段值 // 显示填写结果,仅作演示用 layer.alert(JSON.stringify(field), { title: '当前填写的字段值' }); // 此处可执行 Ajax 等操作 // … return false; // 阻止默认 form 跳转 }); }); </script> </body>
编写一个登录注册页面,并且对应输入有检查验证的代码
好的,以下是一个简单的登录注册页面的代码,包括输入检查和验证:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form-container">
<h2>Login</h2>
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">
</form>
</div>
<div class="form-container">
<h2>Register</h2>
<form action="register.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password" required>
<input type="submit" value="Register">
</form>
</div>
</div>
</body>
</html>
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
```
PHP代码:
```
<?php
// 验证用户名和密码是否正确
function validate_user($username, $password) {
// 在这里写验证代码
// 如果验证通过,返回 true,否则返回 false
}
// 注册新用户
function register_user($username, $password) {
// 在这里写注册代码
// 如果注册成功,返回 true,否则返回 false
}
// 处理登录请求
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['username']) && isset($_POST['password'])) {
$username = $_POST['username'];
$password = $_POST['password'];
if (validate_user($username, $password)) {
// 登录成功,跳转到主页或其他页面
header('Location: index.php');
exit();
} else {
// 登录失败,显示错误信息
echo 'Invalid username or password.';
}
}
// 处理注册请求
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['username']) && isset($_POST['password']) && isset($_POST['confirm_password'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$confirm_password = $_POST['confirm_password'];
if ($password != $confirm_password) {
// 两次密码不一致,显示错误信息
echo 'Passwords do not match.';
} else {
if (register_user($username, $password)) {
// 注册成功,跳转到登录页面
header('Location: login.php');
exit();
} else {
// 注册失败,显示错误信息
echo 'Registration failed.';
}
}
}
?>
```
以上代码仅供参考,具体实现可能需要根据实际情况进行修改。
阅读全文