对于下面这段代码,当 focus 表单(如输入框)时,提交按钮在 IE 6/7 中将会出现一个黑色边框。

本文介绍了如何解决IE9浏览器在兼容性视图下,表单按钮自动添加黑色边框的问题。通过将按钮类型更改为'type=input'并使用JavaScript提交表单,可以有效避免此现象。
<template> <div class="login-container"> <!-- 登录标题 --> <h3 class="title">管理员登录</h3> <!-- 登录表单,label-width 控制标签宽度 --> <el-form :model="loginForm" :rules="rules" ref="formRef" label-width="80px"> <!-- 用户名输入框 --> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名" /> </el-form-item> <!-- 密码输入框切,show-password 控制密码显示 --> <el-form-item label="密    码" prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password /> </el-form-item> <!-- 登录按钮 --> <el-form-item> <el-button type="primary" @click="onLogin" style="width: 100%; margin-top: 20px;">登录</el-button> </el-form-item> </el-form> </div> </template> <script setup> // 引入 Vue 和 Element Plus 提供的功能 import { ref } from 'vue' // 引入 ref 用于声明响应式数据 import { useRouter } from 'vue-router' // 引入 useRouter 用于页面跳转 import { ElMessage } from 'element-plus' // 引入 Element Plus 的消息提示 import { teacherLogin } from '../api/login' // 登录接口方法(后端接口) // 定义表单数据,使用 ref 创建响应式对象 const loginForm = ref({ username: '', // 用户输入的用户名 password: '' // 用户输入的密码 }) // 表单验证规则,要求用户名和密码不能为空 const rules = { username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }], password: [{ required: true, message: '密码不能为空', trigger: 'blur' }] } // 表单引用,用于触发表单验证 const formRef = ref() 6 // 路由对象,用于跳转页面 const router = useRouter() // 登录按钮点击事件处理函数 const onLogin = () => { // 调用表单验证方法 formRef.value.validate((valid) => { if (!valid) return // 如果验证不通过,停止执行 // 构造发送到后端的参数 const data = { Username: loginForm.value.username, Password: loginForm.value.password } // 调用后端登录接口 teacherLogin(data) .then((res) => { if (res.code === 0) { // 登录成功,弹出提示并跳转 ElMessage.success('登录成功!') router.push({ path: '/Desktop' }) // 重定向到工作台页面 } else { // 登录失败,显示错误信息 ElMessage.error(res.msg) } }) .catch(() => { // 接口请求失败 ElMessage.error('登录失败,请稍后再试!') }) }) } </script> <style scoped> /* 外部容器样式 */ .login-container { width: 350px; /* 固定宽度 */ margin: 250px auto; /* 垂直居中(页面中部) */ padding: 15px 50px 20px 30px; /* 内边距 */ background-color: #ffffff; /* 背景白色 */ border: 1px solid #eaeaea; /* 边框浅灰色 */ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */ border-radius: 8px; /* 圆角 */ } /* 标题样式 */ .title { text-align: center; font-size: 20px; margin-bottom: 25px; color: #303133; } </style>如何将背景变成自己的图片
12-02
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值