Using JQuery to verify if a certain letter or word has been entered by the user in a textarea

Question

Using JQuery to verify if a certain letter or word has been entered by the user in a textarea

Can anyone assist me in checking if a user has entered a specific letter or word and, if correct, display a button?

I would appreciate any guidance!

Here is my current code snippet:

 $(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>

javascript jquery html css textarea

Answer 1

Answer №1

The issue may lie in how you are verifying the content of your textarea. Currently, you are extracting all the text and comparing it with =='a'. A better approach would be to use the following method:

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

In this case, 'keyword' represents the specific term you are looking for. This way, you can search for the term within the textarea and determine its presence.

Answer 2

The issue may lie in how you are verifying the content of your textarea. Currently, you are extracting all the text and comparing it with =='a'. A better approach would be to use the following method:

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

In this case, 'keyword' represents the specific term you are looking for. This way, you can search for the term within the textarea and determine its presence.

Answer 3

Answer №2

Within this section of code:

$(document).ready(function() {
   $(".textInput").keyup(function() {
     if ($(this).val() == 'a') {
       $(".next").css("display", "block");
     }
   });
 });

The $(this).val() initially contains the content

<h1>Example</h1> <style> h1{ } </style>

, making it impossible to match it with 'a' unless you delete all the text and enter just the letter 'a'.

It is necessary to utilize indexOf('a') in this way...

$(document).ready(function() {
   $(".textInput").keyup(function() {
     if ($(this).val().indexOf('a') !== -1) {
       $(".next").css("display", "block");
     }
   });
 });

Answer 4

Within this section of code:

$(document).ready(function() {
   $(".textInput").keyup(function() {
     if ($(this).val() == 'a') {
       $(".next").css("display", "block");
     }
   });
 });

The $(this).val() initially contains the content

<h1>Example</h1> <style> h1{ } </style>

, making it impossible to match it with 'a' unless you delete all the text and enter just the letter 'a'.

It is necessary to utilize indexOf('a') in this way...

$(document).ready(function() {
   $(".textInput").keyup(function() {
     if ($(this).val().indexOf('a') !== -1) {
       $(".next").css("display", "block");
     }
   });
 });

Answer 5

Answer №3

If you currently have a condition where the button is only shown if the exact contents of .textarea are equal to 'a', including any leading or trailing whitespace, then you may need to consider using .indexOf() instead.

To achieve the desired functionality of "show me the button when .textarea contains 'a'", you can modify your code as follows:

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

You can test the above example with your original code by visiting: https://jsfiddle.net/m410xphk/8/

Answer 6

If you currently have a condition where the button is only shown if the exact contents of .textarea are equal to 'a', including any leading or trailing whitespace, then you may need to consider using .indexOf() instead.

To achieve the desired functionality of "show me the button when .textarea contains 'a'", you can modify your code as follows:

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

You can test the above example with your original code by visiting: https://jsfiddle.net/m410xphk/8/

Using JQuery to verify if a certain letter or word has been entered by the user in a textarea

Answer №1

Answer №2

Answer №3

Similar questions

What is the most effective way to obtain a customer's latitude and location by prompting them to drop a pin on Google Maps?

Sending a POST request via HTTPS results in a 403 error (Forbidden) being triggered

send parameter when clicking a link rather than using a hashtag

Blazor Razor Component Library (RCL) Lacks CSS IntelliSense

Refresh table in php without the need to reload the entire page

Customize Joomla Module Styles

When you click on one item in a jQuery selector array, the action is being applied to all elements within the array

Utilizing AngularJS to calculate elapsed time and continuously update model and view accordingly

What is the process for assigning variables to modules using RequireJS?

Is there an array containing unique DateTime strings?

Generating a multiplication grid using PHP

Responsive DataTable in Bootstrap 5 automatically hides columns to ensure optimal display on different

Avoid duplicate borders on columns that adjust their size based on the screen width

How can you use CSS to style an image's title attribute?

Instructions on how to successfully send an AJAX request without having to open the webpage while utilizing Google App Engine

Utilizing JQuery UI with JSON data within the Codeigniter framework

The response from a jQuery ajax call to an MVC action method returned empty

Using CSS3 to Create a Pie Chart

Is it possible for me to create a nested component without having to make a new file

Splitting a row into four columns that will appear consistent on mobile devices