Как отключить ссылку, когда текстовое поле пуст?

Zoythrus спросил: 28 марта 2018 в 02:01 в: javascript

Я борюсь с веб-страницей, содержащей текстовое поле и ссылку-ссылку, сделанные следующим образом:

<div id="row">
  <textarea class="form-control" rows="3" id="comment" placeholder="Update your Post"></textarea>
</div><a href="#" id="btn-post" dusk="postButton" class="btn btn-primary" role="button" data-toggle="modal" data-target="#addPost">
  <span class="ion-plus-circled"> Post </span>
</a>

их цель следующая: нажатие кнопки ссылка будет вызываться javascript-файлом ("btn-post"), который будет захватывать содержимое обрабатываемой текстовой области, но содержимое текстового поля не должно быть пустым и, следовательно, я хочу, чтобы кнопка-ссылка быть отключенным, если в текстовом поле нет хотя бы одного символа. Чтобы избежать этой ситуации. Некоторые предупреждения: я не могу использовать кнопку отправки, а кнопка ссылки, которая должна быть отключена, должна быть именно такой.

1 ответ

Есть решение
Sébastien S. ответил: 28 марта 2018 в 02:10

Вот решение с использованием класса и JQuery. Когда текстовое поле пусто, ссылка отключена:

$(document).ready(function() {

  $("a#btn-post").addClass("disabled");

  $("textarea#comment").on("input", function() {
    if ($("textarea#comment").val())
      $("a#btn-post").removeClass("disabled");
    else
      $("a#btn-post").addClass("disabled");
  });

});
.disabled {
  pointer-events:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row">
  <textarea class="form-control" rows="3" id="comment" placeholder="Update your Post"></textarea>
</div>

<a href="#" id="btn-post" dusk="postButton" class="btn btn-primary" role="button" data-toggle="modal" data-target="#addPost">
  <span class="ion-plus-circled"> Post </span>
</a>
Zoythrus ответил: 28 марта 2018 в 02:15
Это идеальное решение, но у меня есть только одна вещь: где мне разместить этот кусок кода?".disabled {pointer-events: none}" Какое расширение должен иметь файл? Спасибо
Sébastien S. ответил: 28 марта 2018 в 02:16
.disabled { pointer-events:none } должен быть включен в файл .css.
whoami ответил: 28 марта 2018 в 02:29
что это значит $ ("textarea # comment"). on ("input", function () {текстовая область при вводе, я никогда не слышал об этом
Sébastien S. ответил: 28 марта 2018 в 02:31
"Событие ввода DOM запускается синхронно, когда изменяется значение элемента
Sébastien S. ответил: 28 марта 2018 в 02:57
Вам нужен этот кусок кода, если вы хотите, чтобы он работал с данным решением. Включение его из внешнего файла - лучшая практика. Создайте свой файл example.css или отредактируйте существующий, который уже включен в HTML, и добавьте в него этот фрагмент кода. Чтобы включить внешний файл CSS в ваш HTML, вот тег и его атрибуты: <link rel="stylesheet" type="text/css" href="example.css">