粗体输入字段值答案

【问题标题】：Bolding Input Field Values粗体输入字段值
【发布时间】：2015-07-18 23:11:57
【问题描述】：

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

【问题讨论】：

只需添加此 CSS 规则：#nickname{ font-weight: bold; }。 .boldis not a standard method and does not automagically bold your text.

标签： javascript html socket.io

【解决方案1】：

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

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

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

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案3】：

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

#elementID {
 font-weight: bold;
}

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

【讨论】：

【解决方案4】：

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

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

【讨论】：