Bootstrap提供了一个JavaScript驱动的对话框元素，可用于替换原生对话框（在某种程度上）;与原生对话框不同，Bootstrap模式不能阻止执行流程。
在 React 中触发 Bootstrap 模态而不使用 npm react-bootstrap
我尝试使用 Bootstrap5 在 React.js 中编写 Modal，但由于多种原因我无法使用 npm react-bootstrap。我尝试了一种方法，使用状态来设置模态类，并使用一个有效的按钮...
在 Bootstrap 5 模式中使用 formvalidation.io
我正在使用 AJAX 将远程页面加载到 Bootstrap 5 Modal 中 打开模态的代码： 打开 我正在使用 AJAX 将远程页面加载到 Bootstrap 5 Modal 中 打开模式的代码： <button type="button" data-id="5" class="btn btn-status">Open</button> <div class="modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" id="support_modal"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Support Ticket</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"></div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('.btn-status').click(function () { var custId = $(this).data('id'); $.ajax({ url: 'driver_support.php', type: 'get', data: { custId: custId }, success: function (response) { $('.modal-body').html(response); $('#support_modal').modal('show'); } }); }); }); </script> 但是这按预期工作... 我在模式（driver_support.php）中加载的页面正在使用 formvalidation.io 来验证表单。 直接在浏览器中查看页面时，验证工作正常 当页面通过 AJAX 加载到模式中时，它不会验证表单。 控制台中没有错误。 页面中的代码加载到模式中（driver_support.php）： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Support Ticket</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="formvalidation/dist/css/formValidation.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script> <script src="formvalidation/dist/js/FormValidation.min.js"></script> <script src="formvalidation/dist/js/plugins/Bootstrap5.min.js"></script> </head> <body> <form name="tickets" id="tickets" action="my_script.php" method="post"> <div class="mb-3"> <label class="form-label text-dark">Post a reply</label> <textarea class="form-control" rows="3" name="message"></textarea> </div> <button type="submit" class="btn btn-lg btn-primary">Reply</button> </form> <script> document.addEventListener('DOMContentLoaded', function (e) { FormValidation.formValidation(document.getElementById('tickets'), { fields: { message: { validators: { notEmpty: { message: 'Please enter a message' } } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), submitButton: new FormValidation.plugins.SubmitButton(), defaultSubmit: new FormValidation.plugins.DefaultSubmit(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.mb-3', }), }, }); }); </script> 感谢您的宝贵时间。 问题是当您使用 AJAX 加载页面时，验证脚本在文档加载侦听器下执行： document.addEventListener('DOMContentLoaded', function (e) { //... 并且由于它共享相同的document，DOM 已经加载，因此它永远不会执行。 随着加载页面中的脚本同步加载，您可以简单地删除侦听器，并让代码在 JQ 将其添加到模态后立即运行： // remove the listener //document.addEventListener('DOMContentLoaded', function (e) { FormValidation.formValidation(document.getElementById('tickets'), {
使用 Bootstrap 和 popper js 的 Angular 模型组件
我试图在单击跟踪模式中的添加跟踪按钮时触发模型打开 添加跟踪... 我试图在单击跟踪模式中的添加跟踪按钮时触发模型打开 <button (click)="toggleForm()" class="btn btn-primary">Add Tracking</button> <div id="trackingModal" class="modal fade" tabindex="-1" *ngIf="showForm"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add Tracking</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" (click)="toggleForm()"></button> </div> <div class="modal-body"> <form *ngIf="showForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="receiver">Receiver</label> <input type="text" class="form-control" id="receiver" [(ngModel)]="newShipmentData.receiver" name="receiver" required /> </div> <div class="form-group"> <label for="price">Price</label> <input type="number" class="form-control" id="price" [(ngModel)]="newShipmentData.price" name="price" required /> </div> <div class="form-group"> <label for="pickupTime">Pickup Time</label> <input type="datetime-local" class="form-control" id="pickupTime" [(ngModel)]="newShipmentData.pickupTime" name="pickupTime" required /> </div> <div class="form-group"> <label for="distance">Distance</label> <input type="number" class="form-control" id="distance" [(ngModel)]="newShipmentData.distance" name="distance" required /> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" (click)="toggleForm()"> Close </button> </div> </div> </div> </div> 这是 traking.ts 代码 import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; import { CommonModule } from "@angular/common"; import { FormsModule } from "@angular/forms"; import { ShipmentData, TrackingService } from "../tracking.service"; import { ShipmentStatusPipe } from "../shipment-status.pipe"; @Component({ selector: "app-tracking", standalone: true, imports: [FormsModule, CommonModule, ShipmentStatusPipe], templateUrl: "./tracking.component.html", styleUrls: ["./tracking.component.css"], }) export class TrackingComponent implements OnInit { // eslint-disable-next-line @typescript-eslint/no-explicit-any shipments: ShipmentData[] = []; // Temporary - adjust based on your service showForm = false; newShipmentData!: ShipmentData; @ViewChild("trackingModal") trackingModal!: ElementRef; constructor(private trackingService: TrackingService) {} ngOnInit() { this.trackingService.getAllShipment().then((shipments: ShipmentData[]) => { this.shipments = shipments; }); this.newShipmentData = { sender: "", receiver: "", price: "0", pickupTime: Date.now(), deliveryTime: 0, distance: 0, isPaid: false, status: 0, }; } toggleForm() { this.showForm = !this.showForm; console.log(this.trackingModal, this.showForm); } async onSubmit() { try { // Call your service to create the shipment await this.trackingService.createShipment(this.newShipmentData); // Handle success (e.g., close the form, display a success message) this.showForm = false; console.log("Shipment created successfully"); // Reset the form this.newShipmentData = { sender: "", receiver: "", price: "0", pickupTime: Date.now(), deliveryTime: 0, distance: 0, isPaid: false, status: 0, }; } catch (error) { // Handle errors from the TrackingService console.error("Error creating shipment:", error); } } } 现在，当我单击“添加跟踪”按钮时，模式不会出现 流程是这样的 首先用户单击添加跟踪按钮 带有表格的模型将打开并询问详细信息 当用户填写详细信息时，它将与跟踪服务交互 您的代码中的一切都很完美。 即使我在本地添加了你的代码。 也许你的元素隐藏在其他元素后面或者某些CSS被覆盖。 您能否提供 stackbiltz，以便提供更多帮助。
我正在学习 Angular 15.0.0，我遇到了一个问题 导航栏没有出现，为什么除了食谱书之外什么也没有出现 代码 &... 我正在学习 Angular 15.0.0，我遇到了一个问题 导航栏没有出现，为什么除了食谱书之外什么也没有出现 代码 <nav class = "navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class ="navbar-brand">Racipe Book!</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Recipes</a></li> <li><a href="#">Shopping list</a></li> </ul> <ul class = "nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" role = "button"> Manage <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">saving data</a></li> <li><a href="#">fetch data</a></li> </ul> </li> </ul> </div> </div> </nav> 它看起来是这样的： 我尝试降级 Bootstrap 但不起作用，并尝试使用 ng-bootstrap 包来包含基于 Angular 的 Bootstrap 组件。也不起作用，在终端中都给出了错误 应该是这样的： 您错过了.navbar-expand课程。 导航栏 - 它是如何工作的 |引导程序 5 导航栏需要用 .navbar 包裹 .navbar-expand{-sm|-md|-lg|-xl|-xxl}，以实现响应式折叠和配色方案类。 此外，您应该需要一个按钮切换来显示/隐藏可折叠部分。确保您已导入： popper.min.js 和 bootstrap.min.js 文件 bootstrap.bundle.min.js 为了让折叠功能发挥作用。 参考：Bootstrap 5 下拉菜单在 Angular 12 上不起作用 完整代码： <nav class="navbar navbar-default navbar-expand-lg"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class="navbar-brand">Racipe Book!</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"><a class="nav-link" href="#">Recipes</a></li> <li class="nav-item"> <a class="nav-link" href="#">Shopping list</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#navbarManageContent" > Manage <span class="caret"></span ></a> <ul class="dropdown-menu" id="navbarManageContent"> <li class="nav-item"> <a class="nav-link" href="#">saving data</a> </li> <li class="nav-item"> <a class="nav-link" href="#">fetch data</a> </li> </ul> </li> </ul> </div> </div> </nav> 演示@StackBlitz
更改 twitter bootstrap 模态的标题背景颜色
我正在尝试使用以下 css 代码更改 twitter bootstrap 模式标题的背景颜色。 .modal-header { 内边距：9px 15px； 边框底部：1px实心#eee； 背景-
打开 Bootstrap Modal 将冻结整个页面（角度）
我有一张引导卡，我想在单击它时打开一个模式： 我有一张引导卡，我想在单击它时打开一个模式： <div class="row"> <div class="col-lg-6" *ngFor="let newsItem of filteredNews"> <div class="box"> <div class="card mb-3" data-bs-toggle="modal" data-bs-target="#newsModal" (click)="this.selectedItem = newsItem" role="button"> <div class="row g-0"> <div class="col-md-4"> <img [src]="newsItem.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;"> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title" style="text-align: center;">{{ newsItem.headline }}</h5> </div> </div> </div> </div> </div> </div> </div> <!-- News Modal --> <div #newsModal class="modal fade" id="newsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">{{ selectedItem?.headline }}</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <img [src]="selectedItem?.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;"> <p>{{ selectedItem?.summary }}</p> </div> </div> </div> </div> 单击卡片将打开模式，但也会冻结整个页面（并将其变成灰色）。 我尝试了此论坛上发布的方法，但没有成功。 感谢您的帮助！ 当模态关闭时，模态背景消失。 <div class="row"> <div class="col-lg-6" *ngFor="let newsItem of filteredNews"> <div class="box"> <div class="card mb-3" (click)="openModal(newsItem)" role="button"> <div class="row g-0"> <div class="col-md-4"> <img [src]="newsItem.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;"> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title" style="text-align: center;">{{ newsItem.headline }}</h5> </div> </div> </div> </div> </div> </div> </div> <!-- News Modal --> <div class="modal fade" id="newsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">{{ selectedItem?.headline }}</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <img [src]="selectedItem?.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;"> <p>{{ selectedItem?.summary }}</p> </div> </div> </div> </div> 在组件 TypeScript 文件中，添加以下函数： import { Component } from '@angular/core'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { selectedItem: any; openModal(newsItem: any) { this.selectedItem = newsItem; $('#newsModal').modal('show'); // Make sure to include jQuery } } 确保在您的项目中包含 jQuery，以便此解决方案能够正常工作 (npm install jquery 并将其包含在您的 angular.json 文件中）。
我无法在 Bootstrap 4 中的全宽轮播中使用模态。我应该怎么做才能使其工作？
我正在尝试在全角轮播中使用模式。它没有按预期正确显示。这是代码。 ''' 我正在尝试在全角轮播中使用模式。它没有按预期正确显示。这是代码。 ''' <div id="carouselExampleControls" class="carousel slide customSlide slides" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active slides slidePadding"> <p class="headline">Team</p> <div class="teamsSlide1"> <div class="gallery-image eventCard teamGroupImgContainer"> <img src="../static/images/Gallery/11.jpg" alt="" class="carousel-img eventCardImg teamGroupImg"> <button class="edit-icon insideEvent insideTeamSlide1" data-toggle="modal" data-target="#teamEdit"> <img src="../static/icons/edit-icon-pen.svg" class="pen"> </button> <!-- Modal --> <div class="modal" id="teamEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Modal End --> </div> <div class="teamQuote"> <p class="quoteStatemenr">“Coming together is a beginning staying together is progress, working together is success”</p> <p class="quoteAuthor">-Henry Ford</p> </div> </div> </div> <div class="carousel-item slide"> <div class="teamMembersPage1"> </div> </div> <div class="carousel-item slide"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon customArrow leftArrow" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon customArrow" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> ''' 这就是我得到的。模态弹出窗口也获得了淡入淡出效果。我应该怎么做才能使模态像往常一样工作？ 将 z-index="1000" 添加到 .modal-dialog <div class="modal" > <div class="modal-dialog" style="z-index: 1000"> </div> </div>
Bootstrap 模式在 laravel js 文件中不起作用
我使用的是 Laravel 9，我已经安装了 Bootstrap、Tailwind、jQuery 和 Vite。 这是我的 vite.config.js 文件： 从“vite”导入{defineConfig}； 从“laravel-vite-plugin”导入 laravel； 导入拍...
我正在使用 Bootstrap 5.1.3，我想在使用 CSS background-filter 属性打开模态时模糊背景。 我尝试过的最简单的方法是： .modal-背景{ 背景过滤器：b...
Bootstrap 5.3 可滚动模态，正文中有表单，页脚有提交按钮
我正在尝试创建一个可滚动的模式对话框，其中包含模态主体中的表单。这是一个很长的垂直形式，所以我想利用模态页脚部分来容纳提交按钮，因为它......
请不要对此投反对票。我是 Bootstrap 模式的新手，试图找出我出错的地方。 我目前有这段代码将显示数据表。第一列数据
我在我的vue应用程序中使用了引导模式，在模式内部我有输入字段，当我输入数据时提交数据并在重新打开所有先前的输入后关闭模式...
我的屏幕上有一个引导模式。当模态显示时，它位于屏幕的中央。 &... 我的屏幕上有一个引导模式。当模态框显示时，它位于屏幕中央。 <div class="modal fade" id="ua_dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-body"> .... </div> </div> 我需要在屏幕上移动模态，因为覆盖了屏幕上的一些信息。用户应该能够向右、向左移动……等等。我可以这样做吗？有一些我可以使用的设置吗？或者用js？什么是最好的方法？谢谢！ 我想你需要这个:) <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <div> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> <script> $('.modal').modal({ keyboard: false, show: true }); // Jquery draggable $('.modal-dialog').draggable({ handle: ".modal-header" }); </script> .modal-content{ margin-top:50px !important; } Espero les ayude este código，trate de integrar a mi proyectodraggable，pero no pude，ya que mi jqueryera incompatible，así quebuscando pude encontrar la solución con el manejo de eventos，y este es el resultado： /*------------------------------------------------------------- Llamada al evento*/ draggable(document.querySelector('#mimodal'), '.modal-head') /*------------------------------------------------------------- Mover modal*/ function mover_mouse({ movementX, movementY }) { let getContainerStyle = window.getComputedStyle(mover_modal) let leftValue = parseInt(getContainerStyle.left) let topValue = parseInt(getContainerStyle.top)`enter code here` mover_modal.style.left = `${leftValue + movementX}px` mover_modal.style.top = `${topValue + movementY}px` } const draggable = (id, handle) => { mover_modal = id window.jQuery(handle).on('mousedown', () => { mover_modal.addEventListener('mousemove', mover_mouse) }) window.jQuery(handle).on('mouseup contextmenu', () => { mover_modal.removeEventListener('mousemove', mover_mouse) }) }
将 jquery 添加到 VueJS 3，以实现 Bootstrap 5 兼容性以使用模式
我研究得越多，我就越困惑，所以请在投票之前记住这一点。而且大多数超过 5 分钟的资源大多毫无用处，这也无济于事。 洙原来是我
如何避免 ng-bootstrap ngbModal 组件内的键绑定传播？
为了使页面符合 ADA，我们需要能够通过在“OPEN”按钮上单击/空格/输入来打开 ng-bootstrap (ngbModal) 模式弹出窗口。 为了保持页面符合 ADA，我们需要能够通过单击“打开”按钮上的/空格/输入来打开 ng-bootstrap (ngbModal) 模式弹出窗口。 <div (keyup.enter)="openModal($event)" (keyup.space)="openModal($event) (click)="openModal($event)">Open Modal</div> 模态页面内： <button>Close</button> 按关闭按钮上的 Enter 键将关闭模态框，返回到调用的 div 元素并重新执行 ENTER 键并再次重新打开模态框。我在 openModal 函数内和模态本身内尝试了 stoppropagation、return false、cancelbubble，但均无济于事，绑定的 ENTER 键不断在两个页面上/下冒泡。 我能够通过模态中的以下实现来解决它： @HostListener("document:keydown", ["$event"]) onKeydownHandler( event: KeyboardEvent ) { if(event.key === "Enter"){ event.preventDefault(); event.stopImmediatePropagation(); } } 为“document:keydown”添加 PreventDefault() 或 stopImmediatePropagation() 将会影响页面的其他正常功能。 相反，只需添加 setTimeout() 并设置 200ms 的计时器即可。
当转到上一个链接时，Rails 中的 Bootstrap 模式会自动打开
我一直在关注这个视频教程系列，使用 Bootstrap v5.3 作为 CSS 框架并在 javascript 端使用 Stimulus(Turbo) 创建 Rails 7 应用程序。 基本上，我想要一个引导模式......
如何在 ASP.NET Core 中的 Identity Razor 页面中使用模式引导
我想使用bootstrap模式在我的网站主页上调用个人Microsoft身份的注册或登录。一切都很顺利，直到应用验证并传输......
如何在 Identity Razor 页面.net core 中使用模式引导
我想使用bootstrap模式在我的网站主页上调用个人Microsoft身份的注册或登录。一切都很顺利，直到应用验证并传输......
CKEditor 5 链接弹出窗口未在 Bootstrap 4 Modal 中显示
我在其中设计了一些 Bootstrap 4 Modal，并在其中实现了 CKEditor 5。我的问题是当我尝试打开链接时，链接弹出窗口不显示。 我在谷歌中搜索发现了一些修复，但仍然......
我有一个带有 的反应引导模式。我想在 上设置自动对焦属性 以下工作正常，但在控制台中显示警告 我有一个带有 react-bootstrap 的 <input> 模态。我想在 <input> 上设置自动对焦属性 以下工作正常，但在控制台中显示警告 <input type="text" autofocus='true' /> Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`? 以下选项不起作用，因为它们在打开模式时不会聚焦输入： <input type="text" autoFocus='true' /> <input type="text" autoFocus={true} /> <input type="text" autoFocus /> 建议的自动对焦设置方式是什么？或者我应该如何使效果良好的示例的警告静音？ 注意：这是react 16.8.6 如果您使用 React Hooks，请将 useCallback() 添加到您的组件，并将 ref={callback} 添加到表单控件： import React, { useCallback } from 'react' function InputComponent() { const autoFocus = useCallback(el => el ? el.focus() : null, []) return <input type="text" ref={autoFocus} /> } export default InputComponent 您也可以将 <input> 替换为 React Bootstrap FormControl。 Refs就是你想要的， constructor(props) { super(props); this.myRef = React.createRef(); } componentDidMount(){ this.myRef.current.focus(); } <input type="text" ref={this.myRef} /> 如果您正在使用反应钩子，您可以编写自己的简单自动聚焦钩子： import { useEffect, useState } from "react"; export const useAutoFocus = (inputId: string) => { const [initialized, setInitialized] = useState(false); useEffect(() => { if(!initialized) { document.getElementById("email").focus(); setInitialized(true); } }); }; 并且简单地使用例如 useAutoFocus("email") 以您的形式。 为什么我开始输入时会出现错误？但如果没有自动对焦或其替代方案，我的代码就可以了。