【问题标题】:How to empty the message in a text area with jquery?如何使用 jquery 清空文本区域中的消息?
【发布时间】:2011-01-05 21:29:12
【问题描述】:

--更新--

我想在回调中清空文本区域中的消息。

谁能告诉我如何清空它?

我试过$("#message").empty(),但它并没有清空它。

 <form method="post" id="form" action="index.php/admin/messages/insertShoutBox">        
    <input name="user" id="nick" value="admin" type="hidden">
    <p class="messagelabel"><label class="messagelabel">Message</label>
    <textarea id="message" name="message" rows="2" cols="40"></textarea>
    <input disabled="disabled" id="send" value="Sending..." type="submit"></p>          
</form>

完整代码

 $("#form").submit(function(){
    if(checkForm()){
        var nick = inputUser.attr("value");
        var message = inputMessage.attr("value");
        //we deactivate submit button while sending
        $("#send").attr({ disabled:true, value:"Sending..." });
        $("#send").blur();
        //send the post to shoutbox.php
        $.ajax({
            type: "POST", 
            url: "index.php/admin/dashboard/insertShoutBox", 
            data: $('#form').serialize(),
            complete: function(data){
                messageList.html(data.responseText);
                updateShoutbox();
                 $('#message').val('').empty();
                //reactivate the send button        
                $("#send").attr({ disabled:false, value:"SUBMIT !" });
            }
         });
    }
    else alert("Please fill all fields!");
    //we prevent the refresh of the page after submitting the form
    return false;
});

【问题讨论】:

    标签: jquery


    【解决方案1】:
    $('#message').val('');
    

    解释(来自@BalusC):
    textarea 是一个带有值的input 元素。您实际上想“清空”该值。所以对于所有其他input 元素(inputselecttextarea),您需要使用element.val('');

    另见docs

    【讨论】:

    • 我试过 $('#message').val('').empty();但没有清空它。
    • empty() 不适用于此处,仅用于从元素中删除子节点。 val('') 是正确的,所以如果它不起作用,您需要发布更多代码,因为听起来根本没有调用该特定行
    • 忘记 empty(),只需使用这个答案,它将 textarea 的值(即内容)设置为空。
    • 解释:textarea 是一个带有 valueinput 元素。您实际上想“清空”。因此,对于所有其他输入元素(inputselecttextarea),您需要使用element.val('');。另见docs.jquery.com/Attributes/val
    • 注意:将值设置为 null 不起作用(我认为它会并且想把它放在这里给其他人)
    【解决方案2】:
    $('#message').html('');
    

    您也可以使用此方法。因为textarea的open和close标签之间都是html代码。

    【讨论】:

    • .html('') 或 .text('') 都对我不起作用。只有 .val('') 有效。
    【解决方案3】:

    .html('')。是为我解决它的唯一方法。

    【讨论】:

      【解决方案4】:

      对于设置为空的所有输入,例如 textarea 选择并输入运行此代码:

      $('#message').val('').change();
      

      【讨论】:

        【解决方案5】:

        //由于你使用的是AJAX,相信你不能依赖这里的提交 //清空动作,你可以包含charset utf-8,因为我认为jQuery POST方法也使用它

        HTML

        <input name="user" id="nick" value="admin" type="hidden">
        
        <p class="messagelabel"><label class="messagelabel">Message</label>
        
        <textarea id="message" name="message" rows="2" cols="40"></textarea>
        
        <input disabled="disabled" id="send" value="Sending..." type="submit">
        

        JAVACRIPT

                                    //reset the form to it's original state
                    $.fn.reset = function () {
        
                                      $(this).each (function() { 
                                        this.reset();
                                         });
                                                            //any logic that you want to add besides the regular javascript reset
                                                        /*$("select#select2").multiselect('refresh');    
                                                        $("select").multiselect('destroy');
                                                        redo();
                                                        */
                                    }
        
        
        //start of jquery based function
         jQuery(function($)
         {
         //useful variable definitions
        
        
        
        
        var page_action = 'index.php/admin/messages/insertShoutBox';
        
         var the_form_click=$("#form input[type='submit']");
        
         //useful in case that we want to make reference to it and update
        
         var just_the_form=$('#form');
        
         //bind to the events instead of the submit action
        
        
        the_form_click.on('click keypress', function(event){
        

        //原代码,去掉了提交事件处理程序.. //$("#form").submit(function(){

        if(checkForm()){
        
            //var nick = inputUser.attr("value");
            //var message = inputMessage.attr("value");
        
            //seems more adequate for your form, not tested
            var nick = $('#form input[type="text"]:first').attr('value');
            var message = $('#form input[type="textarea"]').attr('value');
        
        
            //we deactivate submit button while sending
             //$("#send").attr({ disabled:true, value:"Sending..." });
        
            //This is more convenient here, we remove the attribute disabled for the submit button and we change it's value
        
            the_form_click.removeAttr('disabled')
            //.val("Sending...");
            //not sure why this is here so lonely, when it's the same element.. instead trigger it to avoid any issues later
            .val("Sending...").trigger('blur');
        
        
          //$("#send").blur();
        
        
            //send the post to shoutbox.php
            $.ajax({
                type: "POST", 
                //see you were calling it at the form, on submit, but it's here where you update the url
                //url: "index.php/admin/dashboard/insertShoutBox", 
        
        
                url: page_action,
        
                //data: $('#form').serialize(),
                //Serialize the form data
                data: just_the_form.serialize(),
        
               // complete: function(data){
               //on complete we should just instead use console log, but I;m using alert to test
               complete: function(data){
               alert('Hurray on Complete triggered with AJAX here');
               },
               success: function(data){
                    messageList.html(data.responseText);
                    updateShoutbox();
        
              var timeset='750';
                        setTimeout(" just_the_form.reset(); ",timeset); 
                        //reset the form once again, the send button will return to disable false, and value will be submit
        
                     //$('#message').val('').empty();
                    //maybe you want to reset the form instead????
        
                    //reactivate the send button
                    //$("#send").attr({ disabled:false, value:"SUBMIT !" });
                }
             });
        }
        else alert("Please fill all fields!");
        
        
        //we prevent the refresh of the page after submitting the form
        //return false;
        
        //we prevented it by removing the action at the form and adding return false there instead
        
        event.preventDefault();
        });   //end of function
        
        }); //end jQuery function
        
        </script>
        

        【讨论】:

          【解决方案6】:

          jarijira的评论

          嗯,我在输入 o 的 .html 和 .empty() 方法方面遇到了很多问题。如果 id 代表一个输入,而不是另一种类型的 html 选择器,例如

          或者使用 .val() 函数来操作。

          例如:这是操作输入值的正确方法

          <textarea class="form-control" id="someInput"></textarea>
          
          $(document).ready(function () {
               var newVal='test'
               $('#someInput').val('') //clear input value
               $('#someInput').val(newVal) //override w/ the new value
               $('#someInput').val('test2) 
               newVal= $('#someInput').val(newVal) //get input value
          
          }
          

          对于不当,但有时有效 例如:这是操作输入值的正确方法

          <textarea class="form-control" id="someInput"></textarea>
          
          $(document).ready(function () {
               var newVal='test'
               $('#someInput').html('') //clear input value
               $('#someInput').empty() //clear html inside of the id
               $('#someInput').html(newVal) //override the html inside of text area w/ string could be '<div>test3</div>
               really overriding with a string manipulates the value, but this is not the best practice as you do not put things besides strings or values inside of an input. 
               newVal= $('#someInput').val(newVal) //get input value
          
          }
          

          我遇到的一个问题是我正在使用 $getJson 方法,并且我确实能够使用 .html 调用来操作我的输入。但是,每当我在 getJSON 上出现错误或失败时,我就无法再使用 .clear 和 .html 调用更改我的输入。我仍然可以返回 .val()。经过一些实验和研究,我发现您应该只使用 .val() 函数来更改输入字段。

          【讨论】:

            【解决方案7】:

            $("#message").prop("val","");它对我有用。

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2015-01-30
              • 1970-01-01
              • 2015-02-27
              • 1970-01-01
              • 2020-06-18
              • 2019-06-20
              相关资源
              最近更新 更多