Javascript 粗体输入字段值_Javascript_Html_Socket.io

Javascript 粗体输入字段值

javascript html socket.io

Javascript 粗体输入字段值,javascript,html,socket.io,Javascript,Html,Socket.io,我想在提交输入字段后将其值加粗。这是我使用.bold（）时得到的结果它为什么要这样做？我如何才能大胆地这样做 <body> <h1 id="header"> Socket.IO Chat </h1> <div id="message-box"> <ul id="messages"></ul> </div> <div id="chat-box"> <form actio

我想在提交输入字段后将其值加粗。这是我使用.bold（）时得到的结果

它为什么要这样做？我如何才能大胆地这样做

<body>
<h1 id="header">
    Socket.IO Chat
</h1>
<div id="message-box">
    <ul id="messages"></ul>
</div>
<div id="chat-box">
    <form action="" id="username-form" align="center">
        <input placeholder="Enter your nickname" autocomplete="off" id="nickname">
    </form>
    <form action="" id="client-input" align="center">
        <input placeholder="Press enter to send a message..." autocomplete="off" id="m">
    </form>
</div>
<script>
var socket = io();
var nickname;

$(document).ready(function(){
    $('#client-input').hide();
    $('#username-form').submit(function(){
        $('#nickname').hide();
        $('#client-input').show();
        return false;
    });
});

$('#client-input').submit(function(){
    if($('#m').val().trim().length == 0){
        null;
    }
    else{
        socket.emit('chat message',$('#nickname').val().bold() + ': ' + $('#m').val());
        $('#m').val('');
    }
    return false;
});

socket.on('chat message', function(msg){
    $('#messages').prepend($('<li>').text(msg));
});

</script>


Socket.IO聊天

var socket=io（）；
变量昵称；
$（文档）.ready（函数（）{
$（“#客户端输入”）.hide（）；
$（'#用户名表单'）。提交（函数（）{
$（“#昵称”）.hide（）；
$（“#客户端输入”）.show（）；
返回false；
});
});
$（“#客户端输入”）.submit（函数（）{
if（$（'#m'）.val（）.trim（）.length==0）{
无效的
}
否则{
emit（'chat message'，$（'#昵称'）.val（）.bold（）+'：'+$（'#m'）.val（））；
$（'m'）.val（''）；
}
返回false；
});
socket.on（'chat message'，函数（msg）{
$（“#消息”）.prepend（$（“”）.text（msg））；
});

方法

.bold（）

实际上并没有将文本加粗，它只是在给定字符串周围放置

标记。在输入字段中，您将实际看到字符串周围的这些标记，因为它是预格式化的

而是使用JavaScript更改输入字段的CSS，以粗体显示其内容：

$('#nickname').css('font-weight', 'bold');

然而，这将是相当危险的（xss注入）。相反，您应该将名称和消息作为数组或对象发送到服务器：

socket.emit('chat message', [$('#nickname').val(), $('#m').val()]);
...

socket.on('chat message', function(data){
    var line = $('<li>');
    $('<b>').text(data[0]).appendTo(line); //name
    $('<span>').text(data[1]).appendTo(line);//msg
    $('#messages').prepend(line);
});

socket.emit（'chat message'，[$（'#昵称'）.val（），$（'#m'）.val（））；
...
socket.on（'chat message'，函数（数据）{
变量行=$（“”）；
$（''）.text（数据[0]）.appendTo（行）；//name
$（''）.text（数据[1]）.appendTo（行）；//msg
$（“#消息”）。前置（行）；
});

实现这一点的最佳方法是使用CSS，它实际上比您所做的要简单得多。您可以将CSS直接插入表单元素中，但实际上我建议使用外部样式表并将其与ID连接起来

#elementID {
 font-weight: bold;
}

人们似乎没有意识到，你可以像其他任何元素一样在表单元素上使用CSS样式，在PHP或JavaScript中插入代码可能会产生问题，至少从我的经验来看是这样；CSS部分中的#昵称对象的内部是它在输入字段中加粗文本，而不是客户端在输入字段中提交的内容。看起来像这样

只需添加以下CSS规则：

#昵称{font-weight:bold；}

<代码>粗体。

socket.emit('chat message', [$('#nickname').val(), $('#m').val()]);
...

socket.on('chat message', function(data){
    var line = $('<li>');
    $('<b>').text(data[0]).appendTo(line); //name
    $('<span>').text(data[1]).appendTo(line);//msg
    $('#messages').prepend(line);
});

#elementID {
 font-weight: bold;
}