Javascript 在输入的文本中停止html
大家好,我意识到这是一个经常出现的问题,我已经查看了大量不同的帖子和答案,试图找出我自己的答案,然后再发帖到这里,但是我真的很难让下面的内容发挥作用 我正在创建聊天室,如果您在文本框中键入文本,然后单击输入键id 30,则会发送消息(这是正常功能)。但是,如果要在文本框中键入html,则在发送消息时会出现html。这在我的项目进展中引起了很大的问题。有很多帖子说使用Javascript 在输入的文本中停止html,javascript,php,jquery,html,Javascript,Php,Jquery,Html,大家好,我意识到这是一个经常出现的问题,我已经查看了大量不同的帖子和答案,试图找出我自己的答案,然后再发帖到这里,但是我真的很难让下面的内容发挥作用 我正在创建聊天室,如果您在文本框中键入文本,然后单击输入键id 30,则会发送消息(这是正常功能)。但是,如果要在文本框中键入html,则在发送消息时会出现html。这在我的项目进展中引起了很大的问题。有很多帖子说使用 htmlspecialchars(); 我发现在消息到达我的PHP文件之前,文本框中输入的html已经在单击enter键时发生。
htmlspecialchars();
我发现在消息到达我的PHP文件之前,文本框中输入的html已经在单击enter键时发生。我现在试图在javascript部分找到一些我可以做的事情,在那里我可以在输入文本时停止文本,并对文本框进行调整,因此如果我要输入以下键
< //which has the key ID of 60
类似上面的内容将允许我在每次出现按键关闭事件时检查输入的字符,并阻止html在我的网站上被弄乱。如果有人能给我一些关于如何写的帮助,或者是否有更好的方法?那太好了,非常感谢。您的问题太普遍了,jQuery的优秀人员已经帮您解决了
var encodedText = $("#message-box").text();
看一看,深入讨论文本功能
好的,让我扩展我的答案,因为Dave的评论。关于如何实现我认为Dave的意思的超基本示例 您的HTML:
<!doctype html>
<html>
<head>
<title>Chat</title>
<style>.invalid{border:red}</style>
</head>
<body>
<div id="chat">
<p><span class="user">Foo:</span> Bar</p>
</div>
<form id="message-form" action="/chat.php" method="post">
<textarea id="message" name="message" placeholder="Enter chat message ..." autofocus></textarea>
<input type="submit" value="Send">
</form>
聊天
.无效{边框:红色}
福:酒吧
您的jQuery:
$(function () {
var $chat = $('#chat');
var $messageForm = $('#message-form');
$messageForm.$message = $('#message');
$('#message-form').submit(function (e) {
e.preventDefault();
this.originalMessage = this.$message.val();
this.$message.val('').prop('disabled', true);
$.post('/chat.php', { json: true, message: this.originalMessage }, function (response) {
if (response.error) {
$messageForm.$message
.val($messageForm.originalMessage)
.addClass('invalid')
;
}
else {
$chat.append('<p><span class="user">' + response.name + ':</span> ' + response.message + '</p>');
}
$messageForm.$message.prop('disabled', false).focus();
}, 'json');
});
});
$(函数(){
var$chat=$(“#chat”);
var$messageForm=$(“#message form”);
$messageForm.$message=$(“#message”);
$(“#消息表单”).submit(函数(e){
e、 预防默认值();
this.originalMessage=this.$message.val();
此.$message.val(“”).prop('disabled',true);
$.post('/chat.php',{json:true,message:this.originalMessage},函数(响应){
if(response.error){
$messageForm.$message
.val($messageForm.originalMessage)
.addClass('无效')
;
}
否则{
$chat.append(“”+response.name+”:“+response.message+””);
}
$messageForm.$message.prop('disabled',false).focus();
}“json”);
});
});
您的PHP:
<?php
$json = filter_input(INPUT_POST, "json", FILTER_VALIDATE_BOOLEAN);
if (($message = filter_input(INPUT_POST, "message", FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW|FILTER_REQUIRE_SCALAR)) !== false) {
session_start();
$return = [
"name" => $_SESSION["name"],
"message" => htmlspecialchars($message, ENT_QUOTES|ENT_HTML5),
];
}
else {
$return = [ "error" => true ];
}
if ($json === true) {
header("content-type: application/json");
exit(json_encode($return));
}
var_dump($return);
?>
您需要用映射的html实体替换它们。请参考:这个怎么样。替换(//gm,”)代码>当然,除非该用户正在禁用javascript的情况下浏览。在PHP中只使用striptags()或类似的东西要好得多。这里绝对不是问题所在,因为如果它是一个带有文本区域的普通表单,任何提交都会到达PHP,不会改变。正是这样,你在客户端验证输入时的尝试不会起作用,他会回到原点,html标记破坏了他的应用程序。它们需要通过PHP解析,每当任何人使用javascript验证时,除了“是否填充了此框”之外的任何内容都应该被忽略。你当然是完全正确的,我只是在理解问题时回答了这个问题(如何在jQuery中编码特殊的HTML字符)。我扩展了我的答案以满足您的要求。更好的是,尽管就我个人而言,我仍然更喜欢将html全部剥离,只允许bb代码(或某些描述的自定义标记)之类的内容,这样我们就消除了XSS攻击之类的所有可能性
<?php
$json = filter_input(INPUT_POST, "json", FILTER_VALIDATE_BOOLEAN);
if (($message = filter_input(INPUT_POST, "message", FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW|FILTER_REQUIRE_SCALAR)) !== false) {
session_start();
$return = [
"name" => $_SESSION["name"],
"message" => htmlspecialchars($message, ENT_QUOTES|ENT_HTML5),
];
}
else {
$return = [ "error" => true ];
}
if ($json === true) {
header("content-type: application/json");
exit(json_encode($return));
}
var_dump($return);
?>