我正在制作一个基本的聊天网络应用程序。我实现了这个功能,现在我正在研究用户体验。我正在学习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;
        });

09-20 23:20
查看更多