jQuery 如何使用jquery清空文本区域中的消息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2078146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to empty the message in a text area with jquery?
提问by shin
--UPDATED--
- 更新 -
I want to empty message in a textarea in callback.
我想在回调中清空文本区域中的消息。
Can anyone tell me how to empty it please?
谁能告诉我如何清空它？
I tried $("#message").empty(), but it does not empty it.
我试过 $("#message").empty()，但它没有清空它。
Thanks in advance.
提前致谢。
<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>
Full code
完整代码
$("#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;
});
回答by Matt
$('#message').val('');
Explanation(from @BalusC):
textareais an inputelement with a value. You actually want to "empty" the value. So as for every other inputelement (input, select, textarea) you need to use element.val('');.
解释（来自@BalusC）：
textarea是一个input有值的元素。您实际上想要“清空”该值。因此，对于您需要使用的所有其他input元素 ( input, select, textarea) element.val('');。
Also see docs
另请参阅文档
回答by jarijira
$('#message').html('');
You can use this method too. Because everything between the open and close tag of textarea is html code.
您也可以使用此方法。因为 textarea 的 open 和 close 标签之间的所有内容都是 html 代码。
回答by alebagran
.html(''). was the only method that solved it for me.
.html('')。是唯一为我解决它的方法。
回答by Omid Ahmadyani
for set empty all input such textarea select and input run this code:
设置为空所有输入这样的 textarea 选择和输入运行此代码：
$('#message').val('').change();
回答by lastlink
A comment to jarijira
对jarijira的评论
Well I have had many issues with .html and .empty() methods for inputs o. If the id represents an input and not another type of html selector like
好吧，我在输入 o 的 .html 和 .empty() 方法方面遇到了很多问题。如果 id 代表一个输入而不是另一种类型的 html 选择器，例如
or use the .val() function to manipulate.
或使用 .val() 函数进行操作。
For example: this is the proper way to manipulate input values
例如：这是操作输入值的正确方法
<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
}
For improper, but sometimes works For example: this is the proper way to manipulate input values
对于不当，但有时有效 例如：这是操作输入值的正确方法
<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
}
An issue that I had was I was using the $getJson method and I was indeed able to use .html calls to manipulate my inputs. However, whenever I had an error or fail on the getJSON I could no longer change my inputs using the .clear and .html calls. I could still return the .val(). After some experimentation and research I discovered that you should only use the .val() function to make changes to input fields.
我遇到的一个问题是我使用了 $getJson 方法，我确实能够使用 .html 调用来操作我的输入。但是，每当我在 getJSON 上出现错误或失败时，我都无法再使用 .clear 和 .html 调用更改我的输入。我仍然可以返回 .val()。经过一些实验和研究，我发现您应该只使用 .val() 函数来更改输入字段。
回答by Jean Paul A.K.A el_vete
//since you are using AJAX, I believe that you can't rely in here with the submit //empty the action, you can include charset utf-8 as jQuery POST method uses that as well I think
//由于您使用的是 AJAX，我相信您不能依赖提交 // 清空操作，您可以包含字符集 utf-8，因为 jQuery POST 方法也使用它，我认为
HTML
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
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){
//original code, removed the submit event handler.. //$("#form").submit(function(){
//原始代码，删除了提交事件处理程序.. //$("#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>
