textarea闭合错误导致的js不加载、不执行bug

昨天编写页面的时候遇到一个奇怪的错误,把input改为textarea之后,出现js文件不加载、点击之前正常的按钮也没有反应,排查了好久才发现。

修改之前:

 <input id="name" type="text"/>

修改之后:

 <textarea id="name" />

在谷歌浏览器的"F12-Network"中没有看到js文件加载记录,调试了好久都没有发现问题所在,因为只改了这一行,尝试改回之后就正常了,确认就是这一行的问题。
把textarea改为标准的闭合方式之后,发现也正常了

<textarea id="name" ></textarea>

确认是textarea的非法闭合导致了上述问题

今天在一个单独页面重现了一下
源代码为:

<div class="login layui-anim layui-anim-up"> 
    <form method="post" class="layui-form" >
    ...
    <textarea id="name" />
    </form>
</div> 
<script type="text/javascript" th:src="@{lib/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{js/layext/config.js}"></script>
</body>
</html>

在浏览器中打开之后,发现textarea之后的内容都被显示在textarea中,成为它的值,而不是作为页面内容,也就谈不上加载和执行了

<textarea>    &lt;/form&gt;
&lt;/div&gt;
&lt;script type="text/javascript" src="lib/layui/layui.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/layext/config.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea>

因为我这一行是写在一个默认隐藏的div里面的,点击编辑按钮才会在弹窗中显示,所以没能够及时发现这个问题,在此简单做个记录。

原文地址:https://www.cnblogs.com/zyh1989/p/13776390.html