Вызовите кнопку отправки с помощью jQuery

ProgramBox

Вызовите кнопку отправки с помощью jQuery

Post author:admin
Запись опубликована:25 января, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Я попробовал этот код, который я разместил на скрипке.

Я хочу, чтобы trigger эта кнопка сохранения при нажатии клавиши ввода кнопка сохранения отправляла форму с помощью ajax. Он должен активировать кнопку сохранения, когда 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

Ответ №1:

Вам нужен код ключа для кнопки ввода.

Код ключа для ввода ключа является 13

Когда пользователь нажимает клавишу Ввода, вы можете использовать

  event.keyCode === 13

чтобы узнать, нажал ли пользователь клавишу ввода или нет.

Теперь, чтобы предотвратить 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>

1. Спасибо за ответ, он всегда показывает «Пожалуйста, напишите какой-нибудь комментарий» в консоли и перейдите к следующей строке

2. Сейчас это работает нормально, но как предотвратить появление новой строки, посмотрите на обновленную скрипку jsfiddle.net/shami003/2g9n7cq0/21

3. @IhtishamKhan Я обновил код, пожалуйста, посмотрите, и это поможет вам принять это как ответ

4. Спасибо за быстрый ответ 🙂

Ответ №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();
            }                                                                        
        });
    }
});

1. Эй, спасибо за ответ, но я хотел, чтобы сообщение отправлялось только тогда, когда #Описание комментария «сфокусировано и есть некоторый вводный текст».

2. Это не будет работать таким образом, я проверил это. on («фокусировка») запускается, когда вы фокусируете только текстовую область, после этого код события там не будет работать

Ответ №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) amp;amp; (event.target.textContent != '')) {
      event.preventDefault();
      $("#submit").click();
    }
  });
});

1. Ваше решение каким-то образом работает. Я добавил «e.preventDefault ();», чтобы предотвратить добавление новой строки. Теперь это работает в скрипке, но не на мой взгляд ,потому что эта форма добавлена с помощью jquery, и я использовал » $(документ).on («фокусировка», «#Описание комментариев», функция(e) {$( «. комментарий-отправить»). Слайд-даун(500); $(это).css ({«граница-нижний левый радиус»: «0», «граница-нижний правый радиус’: ‘0’ }); });

2. Вместо » $(#Описание комментария).on(«фокусировка», функция(e){ $(«.комментарий-отправить»).Слайд-шоу(500); $(это).css({ «граница-нижний левый радиус»: «0», «граница-нижний правый радиус’: ‘0’ }); }); где-нибудь в другом месте

3. Итак, как я могу использовать эту логику, используя эту привязку

Метки: Вызовите кнопку отправки с помощью jQuery