Bolding输入字段值

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

为什么这样做的，我怎样才能大胆呢？

<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>

来源

2015-07-18 RetsuWolf

只需添加这个CSS规则：'#nickname {字体重量：大胆的; }'。 '.bold' [不是标准方法，不会自动加粗文本]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/bold）。 –

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

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

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

来源

2015-07-18 23:29:15 FWDekker

$('<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); 
});

来源

2015-07-18 23:34:25

做到这一点，最好的方式是使用CSS，它实际上是一个更容易比你做它。您可以将CSS右键插入表单元素，但我实际上建议使用外部样式表并将其与ID关联。