使用jQuery触发提交按钮

Question

我已经尝试过发布在fiddle上的代码。

我想在按下回车键时trigger那个保存按钮，保存按钮使用ajax提交表单。当span中的text > 0时，它应该触发保存按钮。

$(document).on('focusin', '#commentDescription', function(e) {
$('.comment-submit').slideDown(500);
$(this).css({
'border-bottom-left-radius': '0',
'border-bottom-right-radius': '0'
});
});
$(document).on('focusout', '#commentDescription', function(e) {
if ($('#commentDescription').text().length === 0) {
$('.comment-submit').slideUp(500);
$(this).css({
'border-bottom-left-radius': '5px',
'border-bottom-right-radius': '5px'
});
}
});

.form-container {
background-color: #d0d2ff;
padding: 30px;
}
.textarea {
font-family: inherit;
font-size: inherit;
padding: 1px 6px;
display: block;
width: 100%;
overflow: hidden;
resize: both;
min-height: 30px;
line-height: 20px;
border-radius: 3px;
padding-top: 4px;
background-color: white;
resize: none;
}
.textarea[contenteditable]:empty::before {
content: "Write a comment...";
color: gray;
}
.modal-content {
background-color: #f4f5f7;
}
.textarea:focus {
outline-color: rgb(223 223 223 / 0%);
outline: 0;
}
.comment-submit {
width: 99%;
background-color: white;
padding: 3px 10px 8px 6px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.btn-comment-submit {
padding: 0.215rem 0.800rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-container">

<form id="commentSubmitForm">
<span class="textarea" role="textbox" name="description" id="commentDescription" contenteditable></span>
<input type="hidden" name="key" id="commentTaskId" value='1'>
<div class="comment-submit" style="display: none;">
<button class="btn btn-success btn-xs btn-comment-submit" id="submit" type="submit">Save</button>
</div>
</form>
</div>

JSFiddle代码

Answer 1

您需要输入按钮的键代码。

的键代码输入键 为13

当用户按下输入键时，您可以使用

event.keyCode === 13

查找用户是否按下了输入键。

现在，为了防止按下Enter键时出现new line，我们也可以使用CSS来执行此操作。

.textarea br {
display: none
}

代码：

$(document).on('focusin', '#commentDescription', function(e) {
$('.comment-submit').slideDown(500);
$(this).css({
'border-bottom-left-radius': '0',
'border-bottom-right-radius': '0'
});
});
$(document).on('focusout', '#commentDescription', function(e) {
if ($('#commentDescription').text().length === 0) {
$('.comment-submit').slideUp(500);
$(this).css({
'border-bottom-left-radius': '5px',
'border-bottom-right-radius': '5px'
});
}
});
$("#commentDescription").keyup(function(event) {

if (event.keyCode === 13) {
var spanContent = $('#commentDescription').text();

if(spanContent.length > 0){
//$("#submit").click();
console.log("Form Submitted")
}
else{
console.log("Please write some comment.")
}
}                                                                        
});

.form-container {
background-color: #d0d2ff;
padding: 30px;
}
.textarea {
font-family: inherit;
font-size: inherit;
padding: 1px 6px;
display: block;
width: 100%;
overflow: hidden;
resize: both;
min-height: 30px;
line-height: 20px;
border-radius: 3px;
padding-top: 4px;
background-color: white;
resize: none;
}
.textarea[contenteditable]:empty::before {
content: "Write a comment...";
color: gray;
}
.textarea br {
display: none
}
.modal-content {
background-color: #f4f5f7;
}
.textarea:focus {
outline-color: rgb(223 223 223 / 0%);
outline: 0;
}
.comment-submit {
width: 99%;
background-color: white;
padding: 3px 10px 8px 6px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.btn-comment-submit {
padding: 0.215rem 0.800rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-container">
<form id="commentSubmitForm">
<span class="textarea" role="textbox" name="description" id="commentDescription" contenteditable></span>
<input type="hidden" name="key" id="commentTaskId" value='1'>
<div class="comment-submit" style="display: none;">
<button class="btn btn-success btn-xs btn-comment-submit" id="submit" type="submit">Save</button>
</div>
</form>
</div>

Answer 2

您可以通过在(编辑的(上添加事件来实现这一点

$(document).on('focusin', '#commentDescription', function(e) {
$('.comment-submit').slideDown(500);
$(this).css({
'border-bottom-left-radius': '0',
'border-bottom-right-radius': '0'
});
if($('#commentDescription').val()) {
$("#commentDescription").keyup(function(event) {
if (event.keyCode === 13) {
$("#submit").click();
}                                                                        
});
}
});    

Answer 3

现在，如果文本区域的文本为>0

$(document).on('focusin', '#commentDescription', function(e) {
$('.comment-submit').slideDown(500);
$(this).css({
'border-bottom-left-radius': '0',
'border-bottom-right-radius': '0'
});
$('#commentDescription').bind('keypress', function(event) {
if ((event.keyCode == 13) && (event.target.textContent != '')) {
event.preventDefault();
$("#submit").click();
}
});
});