JQuery для проверки, если пользователь ввел определенную букву или слово в текстовой области

Question

У меня возникли проблемы при попытке проверить, ввел ли пользователь определенную букву или слово (а), и если буква или слово (а) верны, то он будет показывать кнопку.

Любая помощь будет отличной!

Это то, что я до сих пор:

 $(document).ready(function() {
   $(".textArea").keyup(function() {
     if ($(this).val() == 'a') {
       $(".continue").css("visibility", "visible");
     }
   });
 });

body {
  margin: 0;
  padding: 0;
  background-color: #3f2860;
}
.codeArea {
  width: 50%%;
  height: 500px;
  border: 2px solid #ef6d3b;
  box-sizing: border-box;
  font-size: 20px;
  background-color: transparent;
  color: #ffffff;
  outline-width: 0;
  position: relative;
  float: left;
  margin-right: 5px;
}
.textArea {
  width: 100%;
  height: 100%;
  resize: none;
  font-size: 20px;
  background-color: transparent;
  color: #ffffff;
  outline: none;
  border: none;
  white-space: normal;
  position: relative;
  float: left;
}
.boxContainer {
  width: 98%;
}
.boxContainer {
  margin: 0 auto;
}
.continue {
  background-color: #ef6d3b;
  width: 6em;
  text-align: center;
  font-size: 15px;
  border: none;
  height: 25px;
  color: #000000;
  outline: none;
  cursor: pointer;
  border-radius: 5px;
  text-transform: uppercase;
  position: relative;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="codeArea">
  <textarea class="textArea">
    &#60;h1&#62;Test&#60;&#47;h1&#62; &#60;style&#62; h1&#123; &#125; &#60;&#47;style&#62;



  </textarea>

</div>

<div class="buttonContainer">
  <a href="#">
    <button class="continue" type="button">Continue</button>
  </a>


</div>

Answer 1

В этом блоке кода:

$(document).ready(function() {
   $(".textArea").keyup(function() {
     if ($(this).val() == 'a') {
       $(".continue").css("visibility", "visible");
     }
   });
 });

$(this).val() начинается со значения <h1>Test</h1> <style> h1{ } </style>, поэтому никогда не будет равно "а", если вы не удалили весь текст и не набрали одну букву "а".

Вы должны использовать indexOf('a') в качестве таких...

$(document).ready(function() {
   $(".textArea").keyup(function() {
     if ($(this).val().indexOf('a') !== -1) {
       $(".continue").css("visibility", "visible");
     }
   });
 });

Answer 2

Кажется, ваша проблема в проверке значения в вашей текстовой области. Прямо сейчас вы берете весь текст и смотрите, =='a', Вместо этого попробуйте что-то вроде этого

if($(this).val().indexOf('word') !== -1)

Где слово - это то, что вы хотели проверить. Это позволит найти текст в текстовой области и определить, существует он или нет.

Answer 3

В настоящее время вы говорите, что если полное содержимое.textarea равно a, то покажите кнопку. Даже если содержимое содержит пробел до или после, кнопка не будет отображаться.

Если вы хотите "показать мне кнопку, когда.textarea содержит", то вам нужно использовать.indexOf()

 $(document).ready(function() {
       $(".textArea").keyup(function() {
         if ($(this).val().indexOf('a') !== -1) {
           $(".continue").css("visibility", "visible");
         }
       });
     });

Выше пример с вашим оригинальным кодом можно проверить здесь: https://jsfiddle.net/m410xphk/8/