按下在Textarea中输入时提交表单 [英] Form submitting when pressing enter in Textarea
问题描述
我一直在尝试使用各种方法在按Enter键时提交表单。我知道它适用于输入字段，但因为这将是一个评论，它需要是一个文本区域。
这是我目前使用按钮提交的表单。
$ b $
$（'。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，
类型：POST，
data：text =+ dataString，
success：function（data）{
//完成加载
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（'。messageCo （< mments'）。append（'< li>< img class =commentUserImgsrc ='+ profilepic +'>< div class =commentUser>'+ username +'< / div> < div class =commentText>'+ dataString +'< / div>< / li>'）;
$（'。messageTextarea'）。val（''）; //从TextArea中删除评论
}
}）;
返回false;
}）;
它的工作原理应该如此。我想删除提交按钮，只需在用户点击回车键时提交表单。我知道一些人反对这个建议，但是这个网站上的用户将被用来打击来自Facebook等的输入。
我已经尝试过这样的方法，但似乎没有任何效果。
$（'。messageTextarea'）。keydown（function（）{
if（event.keyCode == 13 ）{
this.form.submit（）;
return false;
}
}）;
这是我的表单代码
<形式>
< input type =submitdata-the_id ='+ theid +'name =submitclass =messageSubmitid =submit_btnvalue =提交您的评论>
< / form>
任何帮助都很棒。另外，如果有人知道如何添加一个if函数来阻止表单在Textarea中使用当前默认值进行提交，那就太棒了。目前，如何设置textarea，如果你点击提交，它会提交在这里写下你的评论...
谢谢
编辑：可以解决一个问题...有一个按钮像正常一样提交，但已隐藏，并且当您按下Enter时，会触发一个要求那个按钮？但是......然后......我遇到了同样的问题，除了进入一个新行之外，在textarea中什么都不做...... 方案
试试这个 jsfiddle
HTML：
< form>
< textarea class =messageTextarea>在这里写下您的评论...< / textarea>
< / form>
JS：
$（'。messageTextarea'）。keydown（function（event）{
if（event.keyCode == 13）{
$（this.form）.submit（）
return false;
}
}）。focus（function（）{
if（this.value ==Write你的评论在这里...）{
this.value =;
}
}）。blur（function（）{
if（this。 value ==）{
this.value =在这里写下您的评论...;
}
}）;
$ b $（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）{
//完成加载
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 （'。messageMements'）。append（'< li>< img class =commentUserImgsrc ='+ profilepic +'>< div class =commentUser>'+ username +'< / div>< div class =commentText>'+ dataString +' < / DIV>< /立GT;'）;
$（'。messageTextarea'）。val（''）; //从TextArea中删除评论
}
}）;
返回false;
}）;
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.
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...
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...
try this jsfiddle
HTML:
<form>
<textarea class="messageTextarea">Write your comment here...</textarea>
</form>
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;
});
这篇关于按下在Textarea中输入时提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
