Question

我正在制作一个基本的聊天网络应用。我实现了功能，现在我正致力于用户体验。我正在学习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>

Answer 1

你可以使用

$("#my_msg").val("");

或

$( "#my_msg" ).focusin(function() {
  $( this ).val("");
});

Answer 2

Demo

更改：选择器应为$('form #my_msg')。 <input> - #my_msg是<form>元素的孩子。

以下是使用click处理程序的正确语法。的 Reference

$("form #my_msg").on('click',function(){ $(this).val(''); })

或javascript方式

$("form #my_msg").on('click',function(){ this.value = ''; })

建议：尝试focus事件而不是点击。

Answer 3

您也可以使用

<input type="text" id="my_msg" onClick="this.value=''">

或

$("form#my_msg")..val("");

或

document.getElementById("my_msg").value="";

Answer 4

$("form#my_msg").on('focus', function(){
         $(this).val('');
});

演示：

http://jsfiddle.net/kdEV8/

Answer 5

试试这个兄弟

 $("#my_msg").on("click", function(){
     this.value = "";
 });

Answer 6

关于我对这个问题的评论！

清除每个焦点或点击的文本框对于聊天网络应用程序来说不是一个好主意。

解释评论中的详细信息，说明为什么我们不应该在这种情况下关注清除焦点上的文本字段。

在调用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;
        });

单击清除文本框

6 个答案:

Demo