我正在制作一个基本的聊天网络应用程序。我实现了这个功能,现在我正在研究用户体验。我正在学习JS和jQuery。我想能够清除输入框中的文本,只要我在框中单击以输入新文本/msg。我不知道怎么做。这是我目前所拥有的。
我添加了这行代码,以为它可以实现我的意图,但这并没有发生。$("form#my_msg").onclick().val("");
代码:
<script type="text/javascript">
$(document).ready(function() {
// connect
var socket = io.connect('http://' + document.domain + ':' + location.port);
// response to browser
socket.on('response', function(msg) {
$('#log').append("<br>" + msg.data);
});
// send message
$('form#broadcast').submit(function(event) {
socket.emit('send message', { data: "<b>" + $('#username').val() + "</b>" + " --> " + $('#my_msg').val()});
return false;
});
$("form#my_msg").onclick().val("");
});
</script>
<body class="body">
<form id="broadcast" method="POST" action="#" class="form-group">
<input type="text" id="username" placeholder="username" class="form-control">
<input class="form-control" type="text" id="my_msg" placeholder="Enter message here...">
<button type="submit" class="btn tbn-default" style="background-color: #80FF80;">Send</button>
</form>
<h2>Chat</h2>
<div id="log"></div>
</body>
最佳答案
关于我对这个问题的评论!
清除每个焦点上的文本框或单击不是聊天网站应用程序的好主意。
解释注释中的细节,说明为什么在这种情况下我们不应该在清除文本字段后关注焦点。
在调用ajax调用将消息发送给接收者之后,可以编写脚本以在提交时清除文本。
// send message
$('form#broadcast').submit(function(event) {
socket.emit('send message', { data: "<b>" + $('#username').val() + "</b>" + " --> " + $('#my_msg').val()});
$("#my_msg").val("");
return false;
});