单击时清除文本框答案

【问题标题】：clearing textbox on click单击时清除文本框
【发布时间】：2014-06-24 08:19:39
【问题描述】：

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

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

$("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>

【问题讨论】：

很简单为什么要清除点击时的文字，用户点击发送按钮就可以直接清除，消息发送后可以使用$("form#my_msg").val("");清除值原因在这里，假设我输入了部分消息，但我失去了文本框的焦点，然后再次聚焦消息将被清除，这不是在聊天网络应用程序上工作的正确方法。
@Murtaza 感谢您提出这个问题。你是对的！但是，我在

标签： javascript jquery html flask

【解决方案1】：

你可以使用

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

或

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

你也可以使用

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

或

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

或

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

【讨论】：

【解决方案4】：

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

演示：

http://jsfiddle.net/kdEV8/

【讨论】：

【解决方案5】：

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 事件而不是点击。

【讨论】：

【解决方案6】：

试试这个兄弟

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

【讨论】：

嘿，这行得通，但另一个人提到这不是聊天应用程序的工作方式。相反，我应该在单击发送后清除文本。我试图更改你给我的代码，但我有点糟糕。如果你能做到这一点，我会接受答案
点击发送按钮后会清空文本框对吗？