Question

我想在输入字段提交后加粗输入字段的值。这是我使用.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>

Answer 1

.bold()方法实际上不会使文本变为粗体，它只会在给定字符串周围放置<b>标记。在输入字段中，您实际上会在字符串周围看到这些标记，因为它已预先格式化。

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

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

Answer 2

$('<li>').text(msg)

创建li元素并设置其文本内容。您想要设置html内容。

$('<li>').html(msg)

然而，这将非常危险（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);
});

Answer 3

最好的方法是使用CSS，它实际上比你制作它容易得多。您可以将CSS直接插入到表单元素中，但实际上我建议使用外部样式表并将其与ID连接。

#elementID {
 font-weight: bold;
}

人们似乎没有意识到你可以在表单元素上使用CSS样式，就像任何其他元素一样，在PHP或JavaScript中直接插入代码可能会产生问题，至少从我的经验来看。 / p>

Answer 4

添加font-weight的唯一问题：粗体; CSS部分中#nickname对象的内部是粗体输入字段内的文本，而不是客户端在输入字段中提交的内容。看起来像这样

http://puu.sh/j4o2I/3560618f4b.png

粗体输入字段值

4 个答案: