jQuery 在 Textarea 中按 Enter 时提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13103191/
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
Form submitting when pressing enter in Textarea
提问by Ryan
I've been trying various methods to get a form to submit when hitting the enter key. I know it works with an input field, but because this is going to be a comment, it needs to be a text area.
我一直在尝试各种方法来在按回车键时提交表单。我知道它适用于输入字段，但因为这将是一个评论，所以它需要是一个文本区域。
This is what I currently have for the form to submit with a button.
这是我目前使用按钮提交的表单。
$('.messageSubmit').live('click', function(){
var name = $(this).siblings('.messageTextarea').val();
var theid = $(this).attr('data-the_id');
var dataString = name;
$.ajax({
dataType: 'json',
url: "https://api.instagram.com/v1/media/"+$(this).attr('data-the_id')+"/comments?"+hash,
type: "POST",
data: "text="+dataString,
success: function(data) {
// finish load
console.log(data, dataString, 'fail');
},
error: function(data) {
var username = JSON.parse(localStorage.getItem('iguser'));
var profilepic = JSON.parse(localStorage.getItem('iguserimg'));
//console.log(data, dataString, 'succ');
$('.box[data-the_id="' + theid + '"]').children('.postMessage').children('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>');
$('.messageTextarea').val(''); // Remove comment from TextArea
}
});
return false;
});
It works like it should. I want to remove the submit button and just have the form submit when a user hits the enter key. I know some people advise against this, but the users on this website will be used to hitting enter from Facebook and such.
它应该像它应该的那样工作。我想删除提交按钮，并在用户按下回车键时提交表单。我知道有些人不建议这样做，但该网站上的用户将习惯于从 Facebook 等点击进入。
I've tried methods such at this, but it none seem to work.
我已经尝试过这样的方法，但似乎都不起作用。
$('.messageTextarea').keydown(function() {
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
Here is my form code
这是我的表单代码
<form>
<textarea class="messageTextarea" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;">Write your comment here...</textarea>
<input type="submit" data-the_id="' + theid + '" name="submit" class="messageSubmit" id="submit_btn" value="Submit your comment">
</form>
Any help would be great. Also, if anyone knows how to add an if function that will prevent the form from submitting with the current default value in the Textarea, that would be awesome. Currently, with how the textarea is set up now, if you just hit submit, it will submit Write your comment here...
任何帮助都会很棒。此外，如果有人知道如何添加一个 if 函数来阻止表单使用 Textarea 中的当前默认值提交，那就太棒了。目前，随着 textarea 现在的设置方式，如果您只是点击提交，它将提交在这里写您的评论...
Thanks
谢谢
EDIT: Could a work around be... Having an button to submit, like normal, but have it hidden, and when you hit enter it triggers a call for that button? But then... I'd run into the same problem of enter doing nothing in the textarea except break into a new line...
编辑：解决方法可以是......像往常一样有一个按钮要提交，但将其隐藏，当你按下回车键时，它会触发对该按钮的调用？但是……我会遇到同样的问题，除了换行外，在 textarea 中什么都不做……
回答by Almir Saraj?i?
I think you would also want to give users ability to go to new line using shift.
我认为您还希望让用户能够使用 shift 转到新行。
$('.messageTextarea').on('keyup', function(e) {
if (e.which == 13 && ! e.shiftKey) {
// your AJAX call
}
});
See this: http://jsfiddle.net/almirsarajcic/Gd8PQ/
看到这个：http: //jsfiddle.net/almirsarajcic/Gd8PQ/
It worked for me.
它对我有用。
Also, you need to remove that submit button you currently have.
此外，您需要删除当前拥有的提交按钮。
回答by Anoop
try this jsfiddle
试试这个jsfiddle
HTML:
HTML：
<form>
<textarea class="messageTextarea">Write your comment here...</textarea>
</form>?
JS:
JS：
$('.messageTextarea').keydown(function(event) {
if (event.keyCode == 13) {
$(this.form).submit()
return false;
}
}).focus(function(){
if(this.value == "Write your comment here..."){
this.value = "";
}
}).blur(function(){
if(this.value==""){
this.value = "Write your comment here...";
}
});
$("form").submit(function(){
var name = $(this).siblings('.messageTextarea').val();
var theid = $(this).attr('data-the_id');
var dataString = name;
$.ajax({
dataType: 'json',
url: "https://api.instagram.com/v1/media/"+$(this).attr('data-the_id')+"/comments?",
type: "POST",
data: "text="+dataString,
success: function(data) {
// finish load
console.log(data, dataString, 'fail');
},
error: function(data) {
var username = JSON.parse(localStorage.getItem('iguser'));
var profilepic = JSON.parse(localStorage.getItem('iguserimg'));
//console.log(data, dataString, 'succ');
$('.box[data-the_id="' + theid + '"]').children('.postMessage').children('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>');
$('.messageTextarea').val(''); // Remove comment from TextArea
}
});
return false;
});
?
?
?
?
回答by bukart
try it this way
试试这个方法
<form method="post" action="">
<textarea></textarea>
</form>
<script type="text/javascript" src="./lib/js/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
jQuery('textarea').keydown(function(event) {
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
</script>
I tested it, and it worked
我测试了它，它有效
I added only the parameter eventto the function header
我只event在函数头中添加了参数
