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

您的问题似乎在检查textarea中的值。现在，您正在抓取所有文本并查看它是否为=='a'。而是试试这样的事情

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

“word”是指您想要检查的内容。这将搜索textarea中的文本并确定它是否存在。

Answer 2

在这段代码中：

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

$(this).val()以值<h1>Test</h1> <style> h1{ } </style>开头，因此除非您删除所有文字并输入单个字母'a'，否则永远不会等于'a'。

您需要使用indexOf('a') ......

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

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/

JQuery检查用户是否在textarea中输入了特定的字母或单词

3 个答案: