JavaScript中如何避免在输入框中输入小括号时出现错误

在JavaScript中，当你在输入框（如``或``元素）试图输入小括号“()”时，可能会遇到报错的情况。这通常与浏览器的默认行为和JavaScript的事件处理有关。</p> </p> <p><h4>默认行为</h4> </p> <p><p>在HTML表单元素中，某些字符具有特定的意义。例如，在URL的输入框中输入“http://”后面的括号会被浏览器认为是URL的一部分，而在JavaScript代码中，括号则用于分组表达式或者调用函数。</p> </p> <p><p>当你在输入框中键入括号时，浏览器可能会尝试执行以下默认行为：</p> </p> <p><p>1. <strong>表单提交</strong>: 如果输入框位于一个`</p> <form>`标签内部，并且括号被用于触发表单提交（如提交按钮的值或某种特定的输入触发）。</p> </p> <p><p>2. <strong>URL处理</strong>: 如果是URL类型的输入框，括号可能会被当作URL的一部分，导致URL格式错误。</p> </p> <p><h4>JavaScript事件处理</h4> </p> <p><p>当你为输入框绑定JavaScript事件监听器时（例如`keyup`、`keydown`、`keypress`等），如果代码中存在错误处理不当的情况，则可能会出现报错。</p> </p> <p><p>以下是几种可能导致报错的情况：</p> </p> <p><p>1. <strong>事件对象默认行为</strong>: 在某些事件中，如`keypress`，默认行为是插入字符到输入框。如果你在事件监听器中使用了`event.preventDefault()`，但没有正确处理括号字符，则可能无法插入括号。</p> </p> <p><pre><code class="language-javascript">inputElement.addEventListener('keypress', function(event) {</p> <p>// 如果阻止默认行为，但没有处理括号，则输入框不会显示括号</p> <p>event.preventDefault();</p> <p>// 应该添加逻辑处理括号字符</p> <p>});</p> <p></code></pre> </p> <p><p>2. <strong>正则表达式错误</strong>: 如果你在处理输入时使用了正则表达式，并且该表达式没有正确处理括号（可能是因为括号在正则表达式中具有特殊意义，如分组），则可能导致错误。</p> </p> <p><pre><code class="language-javascript">inputElement.addEventListener('input', function() {</p> <p>var value = this.value;</p> <p>// 错误使用正则表达式，可能导致括号引发错误</p> <p>var result = value.match(/(]/); // 例如这里的括号没有配对</p> <p>});</p> <p></code></pre> </p> <p><p>3. <strong>脚本错误</strong>: 如果你的脚本中存在语法错误，或者假设输入框中不会出现括号，则在插入括号时可能会导致运行时错误。</p> </p> <p><h4>解决方案</h4> </p> <p><p>为了解决输入括号报错的问题，你可以采取以下措施：</p> </p> <p><p>1. <strong>允许默认行为</strong>: 如果你的事件处理逻辑不涉及特殊处理括号，确保不要调用`event.preventDefault()`。</p> </p> <p><pre><code class="language-javascript">inputElement.addEventListener('keypress', function(event) {</p> <p>// 不阻止默认行为，括号可以正常输入</p> <p>});</p> <p></code></pre> </p> <p><p>2. <strong>正确处理括号</strong>: 如果需要特殊处理括号，确保你的代码可以正确处理它们。</p> </p> <p><pre><code class="language-javascript">inputElement.addEventListener('input', function() {</p> <p>var value = this.value;</p> <p>// 使用转义字符，或者确保正则表达式可以正确匹配括号</p> <p>var result = value.match(/[]+/g); // 正确处理括号</p> <p>});</p><p style="text-align:center"><img decoding="async" src="http://weicankao.com/wp-content/uploads/2024/05/73m3v16.jpg" alt="JavaScript中如何避免在输入框中输入小括号时出现错误" title="JavaScript中如何避免在输入框中输入小括号时出现错误"><br /></p> <p></code></pre> </p> <p><p>3. <strong>错误处理</strong>: 在可能发生错误的代码块中使用`try…catch`语句，可以捕获并处理异常。</p> </p> <p><pre><code class="language-javascript">try {</p> <p>// 可能会发生错误的代码</p> <p>} catch (error) {</p> <p>console.error("发生错误:", error);</p> <p>}</p> <p></code></pre> </p> <p><p>综上所述，输入框输入括号报错的原因可能涉及浏览器默认行为和JavaScript事件处理不当。理解这些原因并采取适当的解决方案，可以帮助你避免这类问题。</p></p> </div> <div class="single-credit"> 本文来自网络，不代表微参考立场，转载请注明出处：<a href="http://www.weicankao.com/js/895.html"">http://www.weicankao.com/js/895.html</a> </div> <div class="entry-footer clear"> <div class="entry-footer-right"> </div> </div> <div class="entry-bottom clear"> <div class="entry-tags"> </div> <span class="custom-share"> <span class="social-share" data-sites="wechat, weibo, qq, qzone"></span> </span> </div> </article> <div class="post-nav clear"> <div class="post-nav-previous"><i class="fa fa-angle-left"></i> 上一篇<a href="http://www.weicankao.com/js/897.html" rel="next">JavaScript中＂new＂关键字的工作机制</a></div> <div class="post-nav-next">下一篇 <i class="fa fa-angle-right"></i><a href="http://www.weicankao.com/js/893.html" rel="prev">如何使用JavaScript遍历对象中的所有元素</a></div> </div> <div class="related-content"> <h3 class="section-title">相关推荐</h3> <ul class="clear"> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3388.html">如何用JavaScript确定元素的高度？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 38<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3352.html">如何使用JavaScript确定元素的高度？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 33<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3343.html">如何实现JavaScript页面刷新机制？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 23<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3342.html">如何监控JavaScript中的输入事件？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 24<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3324.html">如何使用JavaScript中的switch语句来执行多分支逻辑？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 21<em>阅读</em></span> </span> </li> <li class="hentry"> <span class="entry-title"><a href="http://www.weicankao.com/js/3313.html">如何将JavaScript字符串转换为数字形式？</a></span> <span class="entry-meta"> <span class="entry-views"><i class="flaticon-eye"></i> 25<em>阅读</em></span> </span> </li> </ul> </div> </main> </div> </div> <aside id="secondary" class="widget-area sidebar"> <div class="sidebar__inner"> <div id="search-3" class="widget widget_search"><form id="searchform" method="get" action="http://www.weicankao.com/"> <input type="search" name="s" class="search-input" placeholder="请输入关键词" autocomplete="off"> <button type="submit" class="search-submit">搜索</button> </form></div><div id="iux-recent-3" class="widget widget-iux-recent widget_posts_thumbnail"><h2 class="widget-title">近期文章</h2><ul><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/3395.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//085d2a44-08.jpg&w=150&h=90" alt="如何以慢动作播放安卓上的Vue动画效果？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/3395.html" rel="bookmark">如何以慢动作播放安卓上的Vue动画效果？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/3394.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//dfba98fc-08.jpg&w=150&h=90" alt="CSS3: 前端设计的新纪元带来了哪些创新？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/3394.html" rel="bookmark">CSS3: 前端设计的新纪元带来了哪些创新？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/3393.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//e77147dd-08.jpg&w=150&h=90" alt="ECS在前端技术领域中扮演着怎样的角色？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/3393.html" rel="bookmark">ECS在前端技术领域中扮演着怎样的角色？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/3392.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//39b7d544-08.jpg&w=150&h=90" alt="空格在前端设计中代表什么符号？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/3392.html" rel="bookmark">空格在前端设计中代表什么符号？</a><div class="entry-meta">2024年 8月 19日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/3391.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//6962d7fb-08.jpg&w=150&h=90" alt="如何运用CSS梯度生成器创建多彩背景效果？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/3391.html" rel="bookmark">如何运用CSS梯度生成器创建多彩背景效果？</a><div class="entry-meta">2024年 8月 19日</div></div></li></ul></div><div id="media_image-3" class="widget widget_media_image"><img width="300" height="300" src="http://www.weicankao.com/wp-content/uploads/2024/05/1-300x300.png" class="image wp-image-125 attachment-medium size-medium" alt="" style="max-width: 100%; height: auto;" decoding="async" srcset="http://www.weicankao.com/wp-content/uploads/2024/05/1-300x300.png 300w, http://www.weicankao.com/wp-content/uploads/2024/05/1-150x150.png 150w, http://www.weicankao.com/wp-content/uploads/2024/05/1-768x768.png 768w, http://www.weicankao.com/wp-content/uploads/2024/05/1.png 1000w" sizes="(max-width: 300px) 100vw, 300px" loading="eager" /></div><div id="iux-views-3" class="widget widget-iux-views widget_posts_thumbnail"><h2 class="widget-title">浏览最多的文章</h2><ul><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/1729.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/Z68gk0aTi4.jpg&w=150&h=90" alt="如何处理CSS下拉菜单被遮挡的问题"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/1729.html" rel="bookmark">如何处理CSS下拉菜单被遮挡的问题</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a href="http://www.weicankao.com/css/30.html" rel="bookmark"><div class="thumbnail-wrap"><img width="150" height="90" src="http://www.weicankao.com/wp-content/uploads/2024/05/qROfSNf8dp-150x90.jpg" class="attachment-iux_widget_thumb size-iux_widget_thumb wp-post-image" decoding="async" loading="eager" title="如何运用CSS提升网页视觉效果缩略图" alt="如何运用CSS提升网页视觉效果缩略图" /></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/30.html" rel="bookmark">如何运用CSS提升网页视觉效果</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/245.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/5wQI4KFnj7.jpg&w=150&h=90" alt="如何清除Vue路由的缓存"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/245.html" rel="bookmark">如何清除Vue路由的缓存</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/3030.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//a5fdd251-07.jpg&w=150&h=90" alt="如何设计Vue页面以支持多模板架构？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/3030.html" rel="bookmark">如何设计Vue页面以支持多模板架构？</a><div class="entry-meta">2024年 7月 23日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/3360.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//19ea8d06-08.jpg&w=150&h=90" alt="在前端开发中，ECS代表了什么？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/3360.html" rel="bookmark">在前端开发中，ECS代表了什么？</a><div class="entry-meta">2024年 8月 9日</div></div></li></ul></div><div id="iux-random-3" class="widget widget-iux-random widget_posts_thumbnail"><h2 class="widget-title">随机文章</h2><ul><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/css/1675.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=image1.jpg&w=150&h=90" alt="如何使用CSS创建轮播图？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/css/1675.html" rel="bookmark">如何使用CSS创建轮播图？</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/vue/517.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/t3CWS1pPU.jpg&w=150&h=90" alt="如何使用Vue实现路由加载"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/vue/517.html" rel="bookmark">如何使用Vue实现路由加载</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/qianduan/1947.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/Q5l8PhiV.jpg&w=150&h=90" alt="Node.js与Java语言有何关联？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/qianduan/1947.html" rel="bookmark">Node.js与Java语言有何关联？</a><div class="entry-meta">2024年 5月 30日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/js/795.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=http://weicankao.com/wp-content/uploads/2024/05/w2vDlU8U.jpg&w=150&h=90" alt="如何使用JavaScript解析URL查询参数"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/js/795.html" rel="bookmark">如何使用JavaScript解析URL查询参数</a><div class="entry-meta">2024年 5月 29日</div></div></li><li class="clear"><a target="_blank" class="thumbnail-link" href="http://www.weicankao.com/js/2536.html"><div class="thumbnail-wrap"><img src="http://www.weicankao.com/wp-content/themes/iux/thumb.php?src=/wp-content/uploads/2024/05//70c2acca-07.jpg&w=150&h=90" alt="如何用JavaScript确定一个元素的高度？"/></div></a><div class="entry-wrap"><a href="http://www.weicankao.com/js/2536.html" rel="bookmark">如何用JavaScript确定一个元素的高度？</a><div class="entry-meta">2024年 7月 10日</div></div></li></ul></div><div id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title">标签</h2><div class="tagcloud"><a href="http://www.weicankao.com/tag/div" class="tag-cloud-link tag-link-27 tag-link-position-1" style="font-size: 11.5pt;" aria-label="div (7 项)">div</a> <a href="http://www.weicankao.com/tag/%e4%bc%aa%e7%b1%bb" class="tag-cloud-link tag-link-35 tag-link-position-2" style="font-size: 11.5pt;" aria-label="伪类 (7 项)">伪类</a> <a href="http://www.weicankao.com/tag/%e5%87%bd%e6%95%b0" class="tag-cloud-link tag-link-7 tag-link-position-3" style="font-size: 21.066666666667pt;" aria-label="函数 (52 项)">函数</a> <a href="http://www.weicankao.com/tag/%e5%8f%82%e6%95%b0" class="tag-cloud-link tag-link-18 tag-link-position-4" style="font-size: 14.766666666667pt;" aria-label="参数 (14 项)">参数</a> <a href="http://www.weicankao.com/tag/%e5%90%ab%e4%b9%89" class="tag-cloud-link tag-link-30 tag-link-position-5" style="font-size: 13.6pt;" aria-label="含义 (11 项)">含义</a> <a href="http://www.weicankao.com/tag/%e5%ae%9a%e4%b9%89" class="tag-cloud-link tag-link-24 tag-link-position-6" style="font-size: 18.383333333333pt;" aria-label="定义 (30 项)">定义</a> <a href="http://www.weicankao.com/tag/%e5%af%b9%e9%bd%90" class="tag-cloud-link tag-link-33 tag-link-position-7" style="font-size: 8pt;" aria-label="对齐 (3 项)">对齐</a> <a href="http://www.weicankao.com/tag/%e5%b1%85%e4%b8%ad" class="tag-cloud-link tag-link-10 tag-link-position-8" style="font-size: 14.416666666667pt;" aria-label="居中 (13 项)">居中</a> <a href="http://www.weicankao.com/tag/%e5%b1%9e%e6%80%a7" class="tag-cloud-link tag-link-15 tag-link-position-9" style="font-size: 22pt;" aria-label="属性 (62 项)">属性</a> <a href="http://www.weicankao.com/tag/%e5%b5%8c%e5%85%a5" class="tag-cloud-link tag-link-9 tag-link-position-10" style="font-size: 10.916666666667pt;" aria-label="嵌入 (6 项)">嵌入</a> <a href="http://www.weicankao.com/tag/%e5%ba%94%e7%94%a8" class="tag-cloud-link tag-link-23 tag-link-position-11" style="font-size: 18.733333333333pt;" aria-label="应用 (32 项)">应用</a> <a href="http://www.weicankao.com/tag/%e5%be%aa%e7%8e%af" class="tag-cloud-link tag-link-17 tag-link-position-12" style="font-size: 13.6pt;" aria-label="循环 (11 项)">循环</a> <a href="http://www.weicankao.com/tag/%e6%8f%92%e5%85%a5" class="tag-cloud-link tag-link-25 tag-link-position-13" style="font-size: 11.5pt;" aria-label="插入 (7 项)">插入</a> <a href="http://www.weicankao.com/tag/%e6%95%88%e6%9e%9c" class="tag-cloud-link tag-link-13 tag-link-position-14" style="font-size: 15pt;" aria-label="效果 (15 项)">效果</a> <a href="http://www.weicankao.com/tag/%e6%96%87%e5%ad%97" class="tag-cloud-link tag-link-29 tag-link-position-15" style="font-size: 9.1666666666667pt;" aria-label="文字 (4 项)">文字</a> <a href="http://www.weicankao.com/tag/%e6%96%87%e6%9c%ac" class="tag-cloud-link tag-link-20 tag-link-position-16" style="font-size: 13.95pt;" aria-label="文本 (12 项)">文本</a> <a href="http://www.weicankao.com/tag/%e6%a0%87%e7%ad%be" class="tag-cloud-link tag-link-16 tag-link-position-17" style="font-size: 20.95pt;" aria-label="标签 (50 项)">标签</a> <a href="http://www.weicankao.com/tag/%e6%a0%b7%e5%bc%8f" class="tag-cloud-link tag-link-11 tag-link-position-18" style="font-size: 18.966666666667pt;" aria-label="样式 (34 项)">样式</a> <a href="http://www.weicankao.com/tag/%e6%a1%86%e6%9e%b6" class="tag-cloud-link tag-link-22 tag-link-position-19" style="font-size: 18.616666666667pt;" aria-label="框架 (31 项)">框架</a> <a href="http://www.weicankao.com/tag/%e6%b3%a8%e9%87%8a" class="tag-cloud-link tag-link-8 tag-link-position-20" style="font-size: 13.95pt;" aria-label="注释 (12 项)">注释</a> <a href="http://www.weicankao.com/tag/%e6%b5%ae%e5%8a%a8" class="tag-cloud-link tag-link-38 tag-link-position-21" style="font-size: 8pt;" aria-label="浮动 (3 项)">浮动</a> <a href="http://www.weicankao.com/tag/%e6%bb%9a%e5%8a%a8" class="tag-cloud-link tag-link-12 tag-link-position-22" style="font-size: 12.083333333333pt;" aria-label="滚动 (8 项)">滚动</a> <a href="http://www.weicankao.com/tag/%e7%bd%91%e9%a1%b5" class="tag-cloud-link tag-link-14 tag-link-position-23" style="font-size: 12.666666666667pt;" aria-label="网页 (9 项)">网页</a> <a href="http://www.weicankao.com/tag/%e8%8f%9c%e5%8d%95" class="tag-cloud-link tag-link-19 tag-link-position-24" style="font-size: 14.416666666667pt;" aria-label="菜单 (13 项)">菜单</a> <a href="http://www.weicankao.com/tag/%e8%a7%84%e5%88%99" class="tag-cloud-link tag-link-39 tag-link-position-25" style="font-size: 9.1666666666667pt;" aria-label="规则 (4 项)">规则</a> <a href="http://www.weicankao.com/tag/%e8%a7%a3%e6%9e%90" class="tag-cloud-link tag-link-28 tag-link-position-26" style="font-size: 15pt;" aria-label="解析 (15 项)">解析</a> <a href="http://www.weicankao.com/tag/%e8%be%b9%e8%b7%9d" class="tag-cloud-link tag-link-37 tag-link-position-27" style="font-size: 10.916666666667pt;" aria-label="边距 (6 项)">边距</a> <a href="http://www.weicankao.com/tag/%e9%94%9a%e7%82%b9" class="tag-cloud-link tag-link-21 tag-link-position-28" style="font-size: 8pt;" aria-label="锚点 (3 项)">锚点</a> <a href="http://www.weicankao.com/tag/%e9%97%b4%e8%b7%9d" class="tag-cloud-link tag-link-31 tag-link-position-29" style="font-size: 11.5pt;" aria-label="间距 (7 项)">间距</a> <a href="http://www.weicankao.com/tag/%e9%9a%90%e8%97%8f" class="tag-cloud-link tag-link-26 tag-link-position-30" style="font-size: 11.5pt;" aria-label="隐藏 (7 项)">隐藏</a></div> </div> </div> </aside> </div> <footer id="colophon" class="site-footer clear"> <div class="clear"></div> <div id="site-bottom" class="clear"> <div class="container"> <div class="menu-primary-container"><ul id="footer-menu" class="footer-nav"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7"><a href="http://www.weicankao.com/./css">css</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-9"><a href="http://www.weicankao.com/./js">js</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10"><a href="http://www.weicankao.com/./vue">vue</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2153"><a href="http://www.weicankao.com/./qianduan">前端问答</a></li> </ul></div> <div class="site-info"> © 2024 <a href="http://weicankao.com">微参考</a> </div> </div> </div>  </footer> </div> <div class="bottom-right"> <div id="back-top" class="bottom-icon"> <a href="#top" title="返回顶部"> <span class="icon"><i class="fa fa-chevron-up"></i></span> <span class="text">返回顶部</span> </a> </div> </div> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/superfish.js?ver=6.6.2" id="superfish-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/jquery.slicknav.js?ver=6.6.2" id="slicknav-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/modernizr.js?ver=6.6.2" id="modernizr-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/html5.js?ver=6.6.2" id="html5-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/jquery.bxslider.js?ver=6.6.2" id="bxslider-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/index.js?ver=20200320" id="index-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/qrcode.js?ver=6.6.2" id="qrcode-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/social-share.js?ver=6.6.2" id="social-share-js"></script> <script type="text/javascript" src="http://www.weicankao.com/wp-content/themes/iux/assets/js/jquery.custom.js?ver=20220101" id="iux-custom-js"></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; /*-----------------------------------------------------------------------------------*/ /* Slick Mobile Menu /*-----------------------------------------------------------------------------------*/ $('#primary-menu').slicknav({ prependTo: '#slick-mobile-menu', allowParentLinks: true, label: '导航' }); }); })(jQuery); </script> <script src="http://www.weicankao.com/wp-content/themes/iux/assets/js/sticky-sidebar.min.js"></script> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; $(window).load(function() { var stickySidebar = new StickySidebar('#secondary', { topSpacing: 20, bottomSpacing: 20, containerSelector: '.site_container', innerWrapperSelector: '.sidebar__inner' }); }); }); })(jQuery); </script> <script> (function($){ //create closure so we can safely use $ as alias for jQuery $(document).ready(function(){ "use strict"; if ($(window).width() >= 960) { var mn = $(".site-header"); var mns = "main-nav-scrolled"; var hdr = $('.top-bar').height(); $(window).scroll(function() { if( $(this).scrollTop() > hdr ) { mn.addClass(mns); $('.header-space').css('display','block'); } else { mn.removeClass(mns); $('.header-space').css('display','none'); } }); } }); })(jQuery); </script> </body> </html>