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

Two DataTables on a Single Page - Odd Initialization in the Second One

Challenges with TypeScript build in DevOps related to Material UI Box Component

Tips for defining a relative path in the base URL with AngularJS

Managing various names of child objects in a recursive manner

What is the best way to reveal and automatically scroll to a hidden div located at the bottom of a webpage?

Utilize an AJAX call to fetch an array and incorporate it within your JavaScript code

What are some ways to avoid sorting parameters in AngularJS when making a GET request using $resource?

Using Angular 4 for HTML 5 Drag and Drop functionality

The useStarRating() hook continues to display 0 even after the user has interacted with the star component

Tips for aligning a logo in the center of a navigation bar

Mongoose encounters an issue: MissingSchemaError is thrown because the Schema has not been registered for the model

Creating a custom styled Drawer with flexbox styling using ReactJS, MUIv5, and the styled-engine-sc library

Using jQuery to target the element before

Error: Attempting to access the value property of a null object within a React Form is not possible

Mongoose: CastError occurs when querying with an incorrect ObjectId for a nested object

Scrollbar becomes inactive following the loading of AJAX content

What is the best method for creating thumbnail URLs for video files in HTML with JavaScript?

How can I set a value using document.getElementById(idPopUPImage).innerHTML to create a static popup in Leaflet?

What is the best way to delete a nested child object using a specific identification number?

Why is the lower right white space left unfilled by the color red?