Adjust the width of a textarea dynamically as you type by detecting keyup events

Question

Adjust the width of a textarea dynamically as you type by detecting keyup events

Two text areas have the same text formatting. Their IDs are textareaA and textareaB.

I've successfully added functionality to resize textareaA on keyup. How can I make textareaB resize its WIDTH while the user is typing in textareaA?

Here's what I attempted, but it didn't work.

$(document).on("click blur keyup", ".fT", function() { // keyup event for textareaA
        var newWidth = $("#textareaA").val(); // this line does not achieve the desired effect
        $("#textareaB").width(newWidth);
});

javascript jquery html css

Answer 1

Answer №1

To achieve this, use the JQuery method .css("property", "value").

Example :

$(document).keyup(function(event)) {
    $("#textareaB").css("width", "1000px");
});

Another example using a variable :

var myVariable = 1000; /* integer value here */

$(document).keyup(function(event)) {
    $("#textareaB").css("width", myVariable.toString() + "px");
});

Answer 2

To achieve this, use the JQuery method .css("property", "value").

Example :

$(document).keyup(function(event)) {
    $("#textareaB").css("width", "1000px");
});

Another example using a variable :

var myVariable = 1000; /* integer value here */

$(document).keyup(function(event)) {
    $("#textareaB").css("width", myVariable.toString() + "px");
});

Answer 3

Answer №2

 $('#TextAreaId').keyup(function(e) {
         while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
             $(this).height($(this).height() + 1);
         };
     });

UPDATE 2: (Adjusting textarea width)

note ::modify the value '8' in the if statement based on your requirements and optimal fit

$(function() {   
$('#mta').keyup(function(e) {

    console.log($(this).outerWidth()+'--'+$(this).val().length*8);
         if($(this).outerWidth() > $(this).val().length) {
             $(this).width($(this).width() + 1);
         };
     });

 });

Answer 4

 $('#TextAreaId').keyup(function(e) {
         while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
             $(this).height($(this).height() + 1);
         };
     });

UPDATE 2: (Adjusting textarea width)

note ::modify the value '8' in the if statement based on your requirements and optimal fit

$(function() {   
$('#mta').keyup(function(e) {

    console.log($(this).outerWidth()+'--'+$(this).val().length*8);
         if($(this).outerWidth() > $(this).val().length) {
             $(this).width($(this).width() + 1);
         };
     });

 });

Adjust the width of a textarea dynamically as you type by detecting keyup events

Answer №1

Answer №2

Similar questions

Prevent the risk of revealing your LinkedIn API key within HTML code

Are we looking at a declaration of an arrow function? Is this concept even real?

Tips for preventing unstyled content flash when updating CSS files dynamically

Receiving an error while trying to install packages from the NPM registry due to non

Using Three.js to extract Vertex Colors based on the z-coordinate of Vectors

Is it possible to alter the value and label of an HTML button in a permanent manner?

An error with code -4058 occurred when I tried to execute the command npm run start-rewired

Unraveling the onsubmit FormObject in an HTML form within the Google Sheets Sidebar: Tips and tricks

Guide on displaying the appropriate child "div" with jQuery?

Animating CSS styles in Vue.js based on JavaScript triggers

Overlaying a div on top of an iframe

What is the reason behind the failure of this ajax request?

Regular expression for selecting characters and numbers in jQuery using a selector

Utilizing a ListView Below a LinearLayout: Step-by-Step Guide

combine two JSON objects into a single object based on their unique identifiers

When attempting to install an npm package from a local directory, I encountered a 404 Not Found error, despite the package existing in the node_modules directory

Top techniques for dynamic loading of HTML and Javascript

Troubleshooting: Vue.js custom select element not responding to blur event

Troubleshooting: Why Your Long Polling Example Isn't Working in Just 5 Minutes

A regular expression in JavaScript for matching unpredictable numbers without any specific words preceding them