标签：输入框 nal 控制 代码 不能 lan 自动补全 一个 4.0
在进行对html页面或者jsp文件编写的时候，可能会遇到输出尖括号，也就是"<"和">"的时候，但是我们知道，在html页面中，
尖括号有着特殊的含义，如果在html页面中单独输出尖括号是不影响页面的展示效果的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="input_textarea"><<<</p> <p id="show_p"></p> <button id="cl"></button> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script> $("#cl").click(function(){ $("#show_p").text($("#input_textarea").text()); }) </script> </body> </html>
运行这段代码，然后点击按钮，然后使用控制台审查元素，我们可以看到，代码变成了
<body>
<p id="input_textarea"><<<</p>
<p id="show_p"><<<</p>
<button id="cl"></button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$("#cl").click(function(){
$("#show_p").text($("#input_textarea").text());
})
</script>
</body>
也就是说将箭头转义成了无意义的字符，这样一来就不会影响页面的正常使用，而且不仅是360和谷歌浏览器，就连
IE浏览器也会显示成转义字符，所以说单独使用箭头是不会影响页面的，但是如果使用一个标签呢。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="input_textarea"><vedioo>ceshi</p> <p id="show_p"></p> <button id="cl"></button> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script> $("#cl").click(function(){ $("#show_p").text($("#input_textarea").text()); }) </script> </body> </html>
运行这段代码，然后点击按钮，然后使用控制台审查元素，我们可以看到，代码变成了
<body>
<p id="input_textarea"><vedioo>ceshi</vedioo></p>
<p id="show_p">ceshi</p>
<button id="cl"></button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$("#cl").click(function(){
$("#show_p").text($("#input_textarea").text());
})
</script>
</body>
我们知道<vedioo>标签是不属于html标签的，但是我们使用了尖括号让html以为它是一个标签，而且我们只输入了一个标签，
并没有输入结束标签，但是浏览器为我们自动补全了，于是它就变成了一个标签，但是我们看到id为show_p的文本是ceshi，
因为text()方法是获取文本而忽略标签，所以并没有获取到<vedioo>标签，但是不能用这种方式来进行过滤，我们来看下一种方式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="input_textarea"> <p id="show_p"></p> <p id="w_p"></p> <button id="cl"></button> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script> $("#cl").click(function(){ $("#show_p").text($("#input_textarea").val()); }) </script> </body> </html>
运行这段代码，在输入框中输入"<videoo>paad"然后点击按钮，然后使用控制台审查元素，我们可以看到，代码变成了
<body>
<input id="input_textarea">
<p id="show_p"><videoo>paad</p>
<p id="w_p"></p>
<button id="cl"></button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$("#cl").click(function(){
$("#show_p").text($("#input_textarea").val());
})
</script>
</body>
我们可以看到id尾show_p的元素中显示的是转义过的字符，虽然我不知道val()方法能不能处理特殊意义字符，但是通过实践可以得知
通过val()显示的箭头已经经过了转义。
但是用val()总是感觉不太合适，接下来我们看在jsp中应该怎么处理特殊意义字符。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>这是第二个页面</p>
<form action="">
<input name="name"/>
<input type="submit" value="tijiao"/>
</form>
<c:out value="${param.name}"></c:out>
<%=request.getParameter("name") %>
</body>
</html>
这是一段jsp文件的代码，运行该文件，在输入框中输入"<video>dfdf",然后使用控制台审查元素，我们可以看到，代码变成了
<body>
<p>这是第二个页面</p>
<form action="">
<input name="name">
<input type="submit" value="tijiao">
</form>
<video>dfdf
<video>dfdf
</video></body>
我们可以看到，经过c:out标签输出的经过了特殊转义，但是使用jsp语句的也就是在<% %>中的代码输出的是没有经过转义的。
最后，我们可以总结一下，在html中，使用text()是获得元素的文本，但是text()会忽略标签，所以获得的是纯文本，如果希望获得标签，就要使用
val()，在输入框中输入含有标签的字段，然后获取的val()显示出来也会有标签。
在jsp中，想要输出的话，最好使用c：out标签，因为它可以处理含有特殊意义的字符。
标签：输入框 nal 控制 代码 不能 lan 自动补全 一个 4.0
原文地址：https://www.cnblogs.com/huangshizhou/p/9902794.html
