I am looking to modify the background color of characters in a text box once the characters in a textarea exceed 150 characters

Question

I am looking to modify the background color of characters in a text box once the characters in a textarea exceed 150 characters

Currently, I am utilizing event.data to capture the text inputted into this particular HTML textbox. My intention is to change the background color to red based on that input. However, when using the style attribute on event.data, I encounter an error. It's important to note that I'm not relying on jQuery for this task.

textarea.addEventListener('input', function( event ) {
    if( length > maxLength ) {
        console.log(event.data);
    }
    // ...
}

I'm aiming for a solution similar to what is illustrated in this example.

Your assistance on this matter would be greatly appreciated.

javascript html css web

Answer 1

Answer №1

let input = document.getElementById('input');
input.addEventListener( 'keyup', event => {
  if( event.target.value.length > 150 )
    console.log('text is >150 chars')
});

<textarea id='input'>

</textarea>

If you ever have the need to emphasize specific text within an input field, it's important to note that this isn't directly possible in a textarea without selecting the text first.

While using contenteditable on an element might enable such functionality, it's not advisable due to the potential of introducing non-form elements within your form structure.

Answer 2

let input = document.getElementById('input');
input.addEventListener( 'keyup', event => {
  if( event.target.value.length > 150 )
    console.log('text is >150 chars')
});

<textarea id='input'>

</textarea>

If you ever have the need to emphasize specific text within an input field, it's important to note that this isn't directly possible in a textarea without selecting the text first.

While using contenteditable on an element might enable such functionality, it's not advisable due to the potential of introducing non-form elements within your form structure.

Answer 3

Answer №2

One effective solution is to utilize the maxlength attribute to restrict input to a maximum of 150 characters.

<textarea maxlength="150"></textarea>

In case the user surpasses the limit, you can apply styles using the :invalid CSS pseudo-class.

:invalid {
  background-color: red;
}

Answer 4

One effective solution is to utilize the maxlength attribute to restrict input to a maximum of 150 characters.

<textarea maxlength="150"></textarea>

In case the user surpasses the limit, you can apply styles using the :invalid CSS pseudo-class.

:invalid {
  background-color: red;
}

Answer 5

Answer №3

I've got everything I need, thank you

To create a red background effect on a webpage, use the following JavaScript function: var container = document.getElementById("red-background"); var paragraph = container.children[0]; var transparent = String(textarea.value).slice(0, tweetLength); var highlighted = String(textarea.value).slice(tweetLength);container.height = textarea.offsetHeight; paragraph.style.top = (-1 * parseInt(textarea.scrollTop)) + "px";paragraph.innerHTML = "" + transparent + "" + highlighted + ""; }

Answer 6

I've got everything I need, thank you

To create a red background effect on a webpage, use the following JavaScript function: var container = document.getElementById("red-background"); var paragraph = container.children[0]; var transparent = String(textarea.value).slice(0, tweetLength); var highlighted = String(textarea.value).slice(tweetLength);container.height = textarea.offsetHeight; paragraph.style.top = (-1 * parseInt(textarea.scrollTop)) + "px";paragraph.innerHTML = "" + transparent + "" + highlighted + ""; }

Answer 7

Answer №4

If you type more than your specified limit, the text will turn red. Is this the desired behavior? If not, please provide further explanation.

function adjustColor() {    // This function is triggered by user input in the textbox
   if (textBoxValue.length > maxLength ){
      console.log(event.data);  
      document.getElementById('your textbox id').style.color = "red";
   }

}

Answer 8

If you type more than your specified limit, the text will turn red. Is this the desired behavior? If not, please provide further explanation.

function adjustColor() {    // This function is triggered by user input in the textbox
   if (textBoxValue.length > maxLength ){
      console.log(event.data);  
      document.getElementById('your textbox id').style.color = "red";
   }

}

I am looking to modify the background color of characters in a text box once the characters in a textarea exceed 150 characters

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I'm facing challenges with setting auto heights on CSS and aligning floating divs

Create custom error messages for loopback instead of using the default ones

Attitude: Defiant and Ignoring Authority

Assistance needed with sending JSON data to a PHP server using the POST method

Challenges encountered while developing Angular FormArrays: Managing value changes, applying validators, and resolving checkbox deselection

Creating variables in styled-components allows you to easily reuse values throughout

I am having trouble getting my textarea to accept width attributes

What is preventing my counter from functioning when I click on the canvas?

Setting up button value dynamically according to dropdown selection in Angular 2

What is the best way to instruct Ajax to choose the specific item clicked within a list?

Tips for accessing the value from an input field in an AngularJS application

In my code, I never use the term "require", yet webpack continues to generate the error message "require is not defined."

Ways to reach the standard look

The Angular HTML Autocomplete feature is not functioning as intended when hosted on a CDN in Chrome, despite setting it to "nope" or "off"

Eliminating unnecessary whitespace between the bottom of the document and an element

Pop-up website opening with fixed dimensions error

How do I switch the background-image on li hover and revert it back when I move off the li element?

Retrieving input values with JQuery

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

Passing state to getStaticProps in Next JSLearn how to effectively pass state