当前位置：首页 > 文章列表 > 文章 > 前端 > React动态表单标签与ID管理技巧分享

React动态表单标签与ID管理技巧分享

2025-09-20 13:44:26 0浏览收藏

本文深入探讨了React动态表单中label标签与input元素ID关联的关键技巧，旨在提升Web应用的可访问性和SEO。在动态生成表单时，如何确保每个input元素拥有唯一的ID并与对应的label标签正确关联，是开发者面临的常见挑战。本文重点介绍两种主流解决方案：**一是通过父组件props传递唯一ID，实现集中式ID管理；二是在组件内部动态生成唯一ID，增强组件的自包含性。**文章详细阐述了这两种策略的实现方式、优缺点，并提供了清晰的代码示例。强调在实际开发中，应根据具体需求选择合适的方案，并推荐使用成熟的UUID库以保证ID的唯一性，从而构建用户友好、无障碍且语义化的React表单。

React/JSX中动态生成表单元素的标签关联与唯一ID管理实践

本教程探讨在React/JSX环境中，如何为动态生成的表单元素正确关联label标签，以确保语义化和可访问性。核心挑战在于HTML id属性必须唯一。文章将介绍两种有效的解决方案：一是通过组件属性（props）传递外部生成的唯一ID；二是在组件内部动态生成唯一ID，并提供相应的代码示例和实现细节。

在Web开发中，特别是在使用React或类似框架构建动态用户界面时，我们经常需要生成多个结构相同但数据不同的表单元素。为了提升用户体验、确保无障碍性（Accessibility）以及优化搜索引擎优化（SEO），为每个表单输入元素（如、、<select>)正确地关联一个<label>标签至关重要。HTML规范要求，<label>标签的for属性值必须与其所关联的表单元素的id属性值完全匹配，并且在一个HTML文档中，id属性值必须是唯一的。当动态生成多个相同的表单元素时，如何为它们分配唯一的id并正确关联label，成为了一个常见的问题。本文将详细介绍两种主流的解决方案。</p><h3>理解label与input的关联机制</h3><p>在深入解决方案之前，我们首先回顾label与input的关联原理。一个<label>元素通过其for属性与一个表单控件关联。for属性的值必须与它所关联的表单控件的id属性值相同。这种关联有以下几个优点：</p><ul><li><strong>可访问性：</strong> 屏幕阅读器能够正确识别标签与输入框的对应关系，帮助视障用户理解表单结构。</li><li><strong>用户体验：</strong> 用户点击label文本时，焦点会自动转移到关联的输入框，提高了表单的可用性。</li><li><strong>语义化：</strong> 明确了表单元素的用途，有助于浏览器和开发者理解页面结构。</li></ul><p>因此，无论表单元素是静态还是动态生成，确保每个input都有一个唯一的id并被相应的label正确引用，是构建高质量Web应用的基础。</p><h3>策略一：通过组件属性（Props）传递唯一ID</h3><p>第一种方法是将唯一ID作为属性（props）从父组件传递给子组件。这种方式的优点是ID的生成和管理集中在父组件中，父组件对每个子组件的ID有明确的控制权。</p><h4>实现方式</h4><ol><li><strong>创建可复用的输入组件：</strong> 封装<label>和<input>到一个独立的React组件中。</li><li><strong>父组件管理ID：</strong> 在父组件中，为每个需要渲染的输入组件生成一个唯一的ID，并通过props将其传递下去。</li></ol><h4>示例代码</h4><pre class="brush:php;toolbar:false">// InputComponent.jsx import React from 'react'; const InputComponent = ({ id, labelText, type = 'text', ...props }) => { return ( <div> <label htmlFor={id}>{labelText}: </label> <input type={type} id={id} {...props} /> </div> ); }; export default InputComponent; // CardEditor.jsx (父组件) import React from 'react'; import InputComponent from './InputComponent'; // 假设InputComponent在同一目录下 function CardEditor() { return ( <form> {/* 手动指定或通过某种逻辑生成唯一的ID */} <InputComponent id="card-title-1" labelText="卡片标题 1" /> <InputComponent id="card-title-2" labelText="卡片标题 2" /> <InputComponent id="card-title-3" labelText="卡片标题 3" /> <button type="submit">保存</button> </form> ); } export default CardEditor;</pre><h4>注意事项</h4><ul><li><strong>ID生成：</strong> 在实际应用中，如果需要生成大量动态组件，手动指定ID并不现实。可以结合数组的map方法和索引，或者使用更健壮的ID生成器（如uuid库）来生成ID。</li><li><strong>可控性：</strong> 这种方法让父组件对ID有完全的控制，当外部系统需要引用特定输入框时，这种方式会更方便。</li><li><strong>冗余性：</strong> 父组件需要负责ID的生成和传递，对于非常多的动态元素，可能会增加父组件的复杂性。</li></ul><h3>策略二：在组件内部动态生成唯一ID</h3><p>第二种方法是让每个输入组件实例在自身内部生成一个唯一的ID。这种方式的优点是组件的自包含性更强，父组件无需关心ID的生成逻辑，使得父组件的代码更简洁。</p><h4>实现方式</h4><ol><li><strong>创建可复用的输入组件：</strong> 同样封装<label>和<input>。</li><li><strong>组件内部生成ID：</strong> 在组件内部，利用一些机制（如随机数、计数器或专门的ID生成库）生成一个唯一的ID，并将其同时赋给label的for属性和input的id属性。</li></ol><h4>示例代码</h4><pre class="brush:php;toolbar:false">// InputComponentWithInternalId.jsx import React, { useMemo } from 'react'; // 简单的唯一ID生成函数 // 注意：在生产环境中，推荐使用更健壮的UUID库，如 'uuid' npm包 const generateUniqueId = () => Math.random().toString(36).slice(-8); const InputComponentWithInternalId = ({ labelText, type = 'text', ...props }) => { // 使用useMemo确保ID在组件的整个生命周期中保持不变 const id = useMemo(() => generateUniqueId(), []); return ( <div> <label htmlFor={id}>{labelText}: </label> <input type={type} id={id} {...props} /> </div> ); }; export default InputComponentWithInternalId; // CardEditor.jsx (父组件) import React from 'react'; import InputComponentWithInternalId from './InputComponentWithInternalId'; function CardEditor() { return ( <form> {/* 父组件无需关心ID的生成 */} <InputComponentWithInternalId labelText="卡片标题 A" /> <InputComponentWithInternalId labelText="卡片标题 B" /> <InputComponentWithInternalId labelText="卡片标题 C" /> <button type="submit">保存</button> </form> ); } export default CardEditor;</pre><h4>注意事项</h4><ul><li><strong>ID生成器的健壮性：</strong> 示例中的Math.random().toString(36).slice(-8)是一个简单的ID生成方式，但在高并发或大量元素生成的场景下，存在ID冲突的极低风险。对于生产环境，强烈建议使用成熟的UUID库（如uuid npm包），它们提供了更强大的唯一性保证。<ul><li>安装 uuid：npm install uuid 或 yarn add uuid</li><li>使用 uuid：import { v4 as uuidv4 } from 'uuid'; const id = useMemo(() => uuidv4(), []);</li></ul></li><li><strong>useMemo或useRef：</strong> 在函数组件中，为了确保每次渲染时ID不会重新生成，可以使用useMemo或useRef来存储生成的ID。useMemo更适合存储计算结果，useRef适合存储任何可变值，两者都能达到目的。</li><li><strong>封装性：</strong> 这种方法将ID生成逻辑封装在组件内部，使得组件更加独立和可复用，父组件调用时更简洁。</li></ul><h3>最佳实践与总结</h3><p>在选择上述两种策略时，可以根据具体需求进行权衡：</p><ul><li><strong>选择策略一（Props传递ID）</strong>：<ul><li>当父组件需要对特定子组件的ID进行外部引用或管理时（例如，与其他API或DOM操作联动）。</li><li>当ID的生成逻辑复杂，且希望集中管理时。</li></ul></li><li><strong>选择策略二（组件内部生成ID）</strong>：<ul><li>当组件是自包含的，ID仅用于内部label和input的关联，无需外部引用时。</li><li>当希望父组件的代码尽可能简洁，减少ID管理的负担时。</li><li>这是多数情况下推荐的做法，因为它提升了组件的封装性和复用性。</li></ul></li></ul><p>无论选择哪种策略，核心目标都是确保每个表单输入元素都拥有一个唯一的id，并被其对应的label通过for属性正确关联。这不仅是HTML规范的要求，更是构建无障碍、用户友好且语义化清晰的Web应用的关键。在生产环境中，务必使用健壮的ID生成方案，以避免潜在的ID冲突问题。</p><p>本篇关于《React动态表单标签与ID管理技巧分享》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/318007.html" title="text-indent属性详解及使用方法" class="img_box"> <img src="/uploads/20250920/175834702068ce3f0c44fe4.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="text-indent属性详解及使用方法">text-indent属性详解及使用方法 </a> <dl> <dt class="lineOverflow"><a href="/article/318007.html" title="text-indent属性详解及使用方法" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">text-indent属性详解及使用方法</dd> </dl> </div> <div class="cateItem"> <a href="/article/318009.html" title="BOM如何获取用户生物数据？" class="img_box"> <img src="/uploads/20250920/175834713468ce3f7e899a5.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="BOM如何获取用户生物数据？"> </a> <dl> <dt class="lineOverflow"><a href="/article/318009.html" class="aBlack" title="BOM如何获取用户生物数据？">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">BOM如何获取用户生物数据？</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/623719.html" class="img_box" title="JavaScript ResizeObserver 如何避免响应式死循环：contentRect、阈值与 disconnect 边界"> <img src="/uploads/20260830/1788094188-resizeobserver-entry-boundary.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript ResizeObserver 如何避免响应式死循环：contentRect、阈值与 disconnect 边界"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 18小时前 | <a href="/articletag/1307_new_0_1.html" class="aLightGray" title="浏览器">浏览器</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/39768_new_0_1.html" class="aLightGray" title="前端性能">前端性能</a> · <a href="/articletag/40780_new_0_1.html" class="aLightGray" title="Web API">Web API</a> · <a href="/articletag/41469_new_0_1.html" class="aLightGray" title="响应式设计">响应式设计</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="响应式布局">响应式布局</a> <a href="javascript:;" class="aLightGray" title="ResizeObserver">ResizeObserver</a> <a href="javascript:;" class="aLightGray" title="contentRect">contentRect</a> <a href="javascript:;" class="aLightGray" title="disconnect">disconnect</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/623719.html" class="aBlack" target="_blank" title="JavaScript ResizeObserver 如何避免响应式死循环：contentRect、阈值与 disconnect 边界">JavaScript ResizeObserver 如何避免响应式死循环：contentRect、阈值与 disconnect 边界</a> </dt> <dd class="cont2"> <span><i class="view"></i>257浏览</span> <span class="collectBtn user_collection" data-id="623719" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623700.html" class="img_box" title="JavaScript View Transitions 如何避免并发导航动画冲突：skipTransition、finished 与回滚状态"> <img src="/uploads/20260830/1788072847-view-transition-initial.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript View Transitions 如何避免并发导航动画冲突：skipTransition、finished 与回滚状态"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/623700.html" class="aBlack" target="_blank" title="JavaScript View Transitions 如何避免并发导航动画冲突：skipTransition、finished 与回滚状态">JavaScript View Transitions 如何避免并发导航动画冲突：skipTransition、finished 与回滚状态</a> </dt> <dd class="cont2"> <span><i class="view"></i>327浏览</span> <span class="collectBtn user_collection" data-id="623700" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623699.html" class="img_box" title="CSS container-type 实战：让卡片组件按自身宽度切换布局"> <img src="/uploads/20260830/1788072717-container-query-narrow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS container-type 实战：让卡片组件按自身宽度切换布局"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/623699.html" class="aBlack" target="_blank" title="CSS container-type 实战：让卡片组件按自身宽度切换布局">CSS container-type 实战：让卡片组件按自身宽度切换布局</a> </dt> <dd class="cont2"> <span><i class="view"></i>266浏览</span> <span class="collectBtn user_collection" data-id="623699" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623688.html" class="img_box" title="HTML dialog closedby 如何区分 Esc、点击外部与强制关闭：关闭原因和兼容降级"> <img src="/uploads/20260830/1788068451-dialog-logs.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML dialog closedby 如何区分 Esc、点击外部与强制关闭：关闭原因和兼容降级"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/623688.html" class="aBlack" target="_blank" title="HTML dialog closedby 如何区分 Esc、点击外部与强制关闭：关闭原因和兼容降级">HTML dialog closedby 如何区分 Esc、点击外部与强制关闭：关闭原因和兼容降级</a> </dt> <dd class="cont2"> <span><i class="view"></i>479浏览</span> <span class="collectBtn user_collection" data-id="623688" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623686.html" class="img_box" title="CSS backdrop-filter 怎么控制毛玻璃层：叠加顺序、透明背景与降级检查"> <img src="/uploads/20260830/1788068333-backdrop-filter-root-focus.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS backdrop-filter 怎么控制毛玻璃层：叠加顺序、透明背景与降级检查"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/623686.html" class="aBlack" target="_blank" title="CSS backdrop-filter 怎么控制毛玻璃层：叠加顺序、透明背景与降级检查">CSS backdrop-filter 怎么控制毛玻璃层：叠加顺序、透明背景与降级检查</a> </dt> <dd class="cont2"> <span><i class="view"></i>496浏览</span> <span class="collectBtn user_collection" data-id="623686" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623656.html" class="img_box" title="CSS anchor positioning 实战：anchor-name、position-anchor 与 fallback 位置如何联动"> <img src="/uploads/20260830/1788064148-anchor-fallback.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS anchor positioning 实战：anchor-name、position-anchor 与 fallback 位置如何联动"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/161_new_0_1.html" class="aLightGray" title="布局">布局</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="/articletag/40165_new_0_1.html" class="aLightGray" title="浏览器特性">浏览器特性</a> · <a href="javascript:;" class="aLightGray" title="anchor-name">anchor-name</a> <a href="javascript:;" class="aLightGray" title="position-try-fallbacks">position-try-fallbacks</a> <a href="javascript:;" class="aLightGray" title="CSS anchor positioning">CSS anchor positioning</a> <a href="javascript:;" class="aLightGray" title="position-anchor">position-anchor</a> <a href="javascript:;" class="aLightGray" title="前端浮层">前端浮层</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/623656.html" class="aBlack" target="_blank" title="CSS anchor positioning 实战：anchor-name、position-anchor 与 fallback 位置如何联动">CSS anchor positioning 实战：anchor-name、position-anchor 与 fallback 位置如何联动</a> </dt> <dd class="cont2"> <span><i class="view"></i>454浏览</span> <span class="collectBtn user_collection" data-id="623656" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623654.html" class="img_box" title="前端拖拽排序怎么保留键盘操作：Drag and Drop API、焦点恢复与提交校验"> <img src="/uploads/20260830/1788063892-keyboard-selected.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端拖拽排序怎么保留键盘操作：Drag and Drop API、焦点恢复与提交校验"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/40050_new_0_1.html" class="aLightGray" title="可访问性">可访问性</a> · <a href="/articletag/40780_new_0_1.html" class="aLightGray" title="Web API">Web API</a> · <a href="javascript:;" class="aLightGray" title="键盘操作">键盘操作</a> <a href="javascript:;" class="aLightGray" title="前端拖拽排序">前端拖拽排序</a> <a href="javascript:;" class="aLightGray" title="焦点恢复">焦点恢复</a> <a href="javascript:;" class="aLightGray" title="Drag and Drop API">Drag and Drop API</a> <a href="javascript:;" class="aLightGray" title="提交校验">提交校验</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/623654.html" class="aBlack" target="_blank" title="前端拖拽排序怎么保留键盘操作：Drag and Drop API、焦点恢复与提交校验">前端拖拽排序怎么保留键盘操作：Drag and Drop API、焦点恢复与提交校验</a> </dt> <dd class="cont2"> <span><i class="view"></i>383浏览</span> <span class="collectBtn user_collection" data-id="623654" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623626.html" class="img_box" title="ResizeObserver 监听卡片宽度时如何避免循环触发：borderBoxSize 与帧内合并"> <img src="/uploads/20260830/1788055330-resizeobserver-frame-render.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="ResizeObserver 监听卡片宽度时如何避免循环触发：borderBoxSize 与帧内合并"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/623626.html" class="aBlack" target="_blank" title="ResizeObserver 监听卡片宽度时如何避免循环触发：borderBoxSize 与帧内合并">ResizeObserver 监听卡片宽度时如何避免循环触发：borderBoxSize 与帧内合并</a> </dt> <dd class="cont2"> <span><i class="view"></i>487浏览</span> <span class="collectBtn user_collection" data-id="623626" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623601.html" class="img_box" title="JavaScript Promise.withResolvers 如何拆分异步控制器：旧写法迁移与异常收口"> <img src="/uploads/20260830/1788050997-promise-resolvers-control.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript Promise.withResolvers 如何拆分异步控制器：旧写法迁移与异常收口"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/623601.html" class="aBlack" target="_blank" title="JavaScript Promise.withResolvers 如何拆分异步控制器：旧写法迁移与异常收口">JavaScript Promise.withResolvers 如何拆分异步控制器：旧写法迁移与异常收口</a> </dt> <dd class="cont2"> <span><i class="view"></i>412浏览</span> <span class="collectBtn user_collection" data-id="623601" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623600.html" class="img_box" title="HTML inert 如何管理模态层焦点：inert、aria-hidden 与恢复焦点"> <img src="/uploads/20260830/1788050953-focus-restore-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML inert 如何管理模态层焦点：inert、aria-hidden 与恢复焦点"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/40991_new_0_1.html" class="aLightGray" title="无障碍">无障碍</a> · <a href="javascript:;" class="aLightGray" title="html">html</a> <a href="javascript:;" class="aLightGray" title="无障碍">无障碍</a> <a href="javascript:;" class="aLightGray" title="dialog">dialog</a> <a href="javascript:;" class="aLightGray" title="inert">inert</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/623600.html" class="aBlack" target="_blank" title="HTML inert 如何管理模态层焦点：inert、aria-hidden 与恢复焦点">HTML inert 如何管理模态层焦点：inert、aria-hidden 与恢复焦点</a> </dt> <dd class="cont2"> <span><i class="view"></i>430浏览</span> <span class="collectBtn user_collection" data-id="623600" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623573.html" class="img_box" title="Popover API 如何实现点击外部关闭：popover、beforetoggle 与无障碍焦点验收"> <img src="/uploads/20260830/1788046542-popover-light-dismiss-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Popover API 如何实现点击外部关闭：popover、beforetoggle 与无障碍焦点验收"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/40050_new_0_1.html" class="aLightGray" title="可访问性">可访问性</a> · <a href="/articletag/40780_new_0_1.html" class="aLightGray" title="Web API">Web API</a> · <a href="javascript:;" class="aLightGray" title="Toggle">Toggle</a> <a href="javascript:;" class="aLightGray" title="popover">popover</a> <a href="javascript:;" class="aLightGray" title="Popover API">Popover API</a> <a href="javascript:;" class="aLightGray" title="beforetoggle">beforetoggle</a> <a href="javascript:;" class="aLightGray" title="无障碍焦点">无障碍焦点</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/623573.html" class="aBlack" target="_blank" title="Popover API 如何实现点击外部关闭：popover、beforetoggle 与无障碍焦点验收">Popover API 如何实现点击外部关闭：popover、beforetoggle 与无障碍焦点验收</a> </dt> <dd class="cont2"> <span><i class="view"></i>256浏览</span> <span class="collectBtn user_collection" data-id="623573" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/623546.html" class="img_box" title="adoptedStyleSheets 如何在多个 Shadow DOM 共享样式：构造、挂载与更新边界"> <img src="/uploads/20260830/1788042371-adopted-stylesheets-construction.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="adoptedStyleSheets 如何在多个 Shadow DOM 共享样式：构造、挂载与更新边界"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="javascript:;" class="aLightGray" title="Web Components">Web Components</a> <a href="javascript:;" class="aLightGray" title="Shadow DOM">Shadow DOM</a> <a href="javascript:;" class="aLightGray" title="adoptedStyleSheets">adoptedStyleSheets</a> <a href="javascript:;" class="aLightGray" title="CSSStyleSheet">CSSStyleSheet</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/623546.html" class="aBlack" target="_blank" title="adoptedStyleSheets 如何在多个 Shadow DOM 共享样式：构造、挂载与更新边界">adoptedStyleSheets 如何在多个 Shadow DOM 共享样式：构造、挂载与更新边界</a> </dt> <dd class="cont2"> <span><i class="view"></i>365浏览</span> <span class="collectBtn user_collection" data-id="623546" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight">  <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13197.html" target="_blank" title="HitPaw Watermark Remover：AI智能图片视频去水印工具下载与评测" class="img_box"> <img src="/uploads/20260831/17881578366a951f8c50bc8.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="HitPaw Watermark Remover：AI智能图片视频去水印工具下载与评测" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13197.html" class="aBlack" target="_blank" title="HitPaw Watermark Remover">HitPaw Watermark Remover</a></dt> <dd class="cont1 lineTwoOverflow"> HitPaw Watermark Remover是一款基于AI技术的强大去水印软件，支持Windows和Mac系统。它能自动检测并移除图片及视频中的水印、Logo和多余对象，提供多种修复模式及批量处理功能，适用于社交媒体创作、商业营销及个人编辑等多种场景。 </dd> <dd class="cont2">5次使用</dd> </dl> </li> <li> <a href="/ai/13172.html" target="_blank" title="美图抠图：AI智能在线抠图工具，支持一键批量处理与高清透明背景导出" class="img_box"> <img src="/uploads/20260831/17881560316a95187f414c8.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="美图抠图：AI智能在线抠图工具，支持一键批量处理与高清透明背景导出" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13172.html" class="aBlack" target="_blank" title="美图抠图">美图抠图</a></dt> <dd class="cont1 lineTwoOverflow"> 美图抠图是美图秀秀推出的在线AI智能抠图工具，支持人像、商品等全品类自动识别。具备一键抠图、批量处理、换背景及画质修复功能，操作简单高效，适合电商、设计及个人用户快速生成高质量透明背景图片。 </dd> <dd class="cont2">10次使用</dd> </dl> </li> <li> <a href="/ai/13163.html" target="_blank" title="易撰AI写作助手：爆文分析、热点追踪与原创检测一站式解决方案" class="img_box"> <img src="/uploads/20260831/17881542366a95117cedda1.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="易撰AI写作助手：爆文分析、热点追踪与原创检测一站式解决方案" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13163.html" class="aBlack" target="_blank" title="易撰">易撰</a></dt> <dd class="cont1 lineTwoOverflow"> 易撰是一款专为自媒体人打造的高效AI写作工具，提供爆文分析、实时热点追踪、海量视频素材库及智能原创检测功能。通过数据驱动的内容优化策略，帮助创作者提升文章质量、节省创作时间并最大化收益潜力。 </dd> <dd class="cont2">13次使用</dd> </dl> </li> <li> <a href="/ai/13158.html" target="_blank" title="百度作家平台：官方一站式AI辅助创作工具，智能续写与校阅助力高效写作" class="img_box"> <img src="/uploads/20260831/17881614316a952d970b9e4.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="百度作家平台：官方一站式AI辅助创作工具，智能续写与校阅助力高效写作" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13158.html" class="aBlack" target="_blank" title="百度作家平台">百度作家平台</a></dt> <dd class="cont1 lineTwoOverflow"> 百度作家平台是百度官方推出的AI写作助手，提供智能对话、AI续写、润色扩写及实时校阅功能，帮助创作者提升小说与故事创作效率，轻松产出优质内容。 </dd> <dd class="cont2">4次使用</dd> </dl> </li> <li> <a href="/ai/13156.html" target="_blank" title="文思助手：AI智能写作工具，一键生成报告、论文与公文" class="img_box"> <img src="/uploads/20260831/17881596376a9526951545a.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="文思助手：AI智能写作工具，一键生成报告、论文与公文" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13156.html" class="aBlack" target="_blank" title="文思助手">文思助手</a></dt> <dd class="cont1 lineTwoOverflow"> 文思助手是一款高效的AI写作智能体，支持一键生成专业报告、工作总结及科研论文。具备公文写作、AI搜索与对话功能，助力用户提升文档创作效率与质量。 </dd> <dd class="cont2">5次使用</dd> </dl> </li> </ul> </div>  <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/621422.html" class="aBlack" title="智能体安全引领产业升级——国内AI安全产品市场深度分析">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></dt> <dd> <span class="left">2026-08-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/619053.html" class="aBlack" title="CSS变量简化按钮悬停效果技巧">CSS变量简化按钮悬停效果技巧</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/618916.html" class="aBlack" title="JavaScript符号类型详解与应用">JavaScript符号类型详解与应用</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/612539.html" class="aBlack" title="HTML剪贴板复制粘贴怎么用">HTML剪贴板复制粘贴怎么用</a></dt> <dd> <span class="left">2026-05-26</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> <a href="/manual/go/" target="_blank" class="aBlack" title="手册">手册</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">湘ICP备19018815号-4</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div>  <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div>  <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>  </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//www.17golang.com/article/318008.html"/> <input type="hidden" name="__token__" value="2401e282b61da7e050ba8e263ac91475" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//www.17golang.com/article/318008.html"/> <input type="hidden" name="__token__" value="2401e282b61da7e050ba8e263ac91475" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/frontend/common.js"></script> </body> </html>