Javascript 单击时清除文本框

我正在制作一个基本的聊天网络应用程序。我实现了功能，现在我正在研究用户体验。我正在学习JS和jQuery。我希望在输入框内单击以输入新文本/msg时，能够立即清除输入框中的文本。我不知道怎么做。这是我到目前为止所拥有的

我添加了这一行，以为它会实现我的意图，但这并没有发生

$（“form#my_msg”）.onclick（）.val（“”）

代码：


$（文档）.ready（函数（）{
//连接
var socket=io.connect（'http://'+document.domain+'：'+location.port）；
//对浏览器的响应
socket.on（'response'，函数（msg）{
$（'#log'）。追加（“
”+msg.data）；
});
//发送消息
$（'form#broadcast'）。提交（函数（事件）{
emit（'send message'，{data:+$（'#username'）.val（）+'+'-->“+$（'#my#msg'）.val（））；
返回false；
});
$（“form#my_msg”）.onclick（）.val（“”）；
});
发送
聊天
您可以使用

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

或

你可以用

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

或

更改：选择器应为
$（'form#my_msg'）
-
#my_msg
是
元素的子元素


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

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

还是javascript方式

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

建议：尝试
focus
事件，而不是单击

更改：选择器应为
$（'form#my_msg'）
-
#my_msg
是
元素的子元素


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

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

还是javascript方式

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

建议：尝试聚焦事件而不是单击。
您也可以使用

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

或

你也可以使用

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

或

演示：


演示：

试试这个兄弟

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

试试这个兄弟

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

关于我对这个问题的评论

对于聊天web应用程序来说，清除每次焦点或单击时的文本框不是一个好主意

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

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

//发送消息
$（'form#broadcast'）。提交（函数（事件）{
emit（'send message'，{data:+$（'#username'）.val（）+'+'-->“+$（'#my#msg'）.val（））；
$（“#我的味精”）.val（“”）；
返回false；
});
关于我对这个问题的评论

对于聊天web应用程序来说，清除每次焦点或单击时的文本框不是一个好主意

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

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

//发送消息
$（'form#broadcast'）。提交（函数（事件）{
emit（'send message'，{data:+$（'#username'）.val（）+'+'-->“+$（'#my#msg'）.val（））；
$（“#我的味精”）.val（“”）；
返回false；
});
很简单，为什么要在单击时清除文本，只要用户单击“发送”按钮，就可以直接清除文本，消息发送后，就可以使用
$（“form#my_msg”）.val（“”）清除值这里的原因是，假设我输入了部分消息，但我在文本框中失去了焦点，然后再次在焦点上，消息将被清除，这不是处理聊天web应用程序的正确方法。@Murtaza感谢您提出这个问题。你说得对！然而，我在我的标记中添加了这段代码，并对其进行了测试，但什么也没有发生=/很简单，为什么您要在单击时清除文本，您可以在用户单击“发送”按钮后直接清除它，消息发送后，您可以使用
$（“form#my_msg”）.val（“”）清除值这里的原因是，假设我输入了部分消息，但我在文本框中失去了焦点，然后再次在焦点上，消息将被清除，这不是处理聊天web应用程序的正确方法。@Murtaza感谢您提出这个问题。你说得对！然而，我在我的标记中添加了这段代码，并对其进行了测试，但什么也没有发生=/hey这是可行的，但另一个提到了这是如何实现的；这不是聊天应用程序的工作原理。相反，我应该在单击“发送”后清除文本。我试图改变你给我的代码，但我有点差劲。如果你能做到这一点，我会在点击发送按钮后接受回答，然后它会清除文本框，对吗？嘿，这是可行的，但另一个提到了这是怎么回事；这不是聊天应用程序的工作原理。相反，我应该在单击“发送”后清除文本。我试图改变你给我的代码，但我有点差劲。如果你能做到这一点，我会在点击发送按钮后接受回答，然后它会清除文本框，对吗？