Resize textarea width while typing using keyup

Question

There are two textareas which has the exact same text formatting. IDs are textareaA and textareaB.

I've set some stuff to happen for textareaA keyup. My question is How do I set a textareaB to resize its WIDTH while the user is typing in textareaA?

This is what I tried but no luck.

$(document).on("click blur keyup", ".fT", function() { // keyup responds with textareaA
        var newWidth = $("#textareaA").val(); //does not work
        $("#textareaB").width(newWidth);
});

There are some great answers here http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize — Alexander, Feb 23 '15 at 12:48
@Alexander: thanks, that's about scrollHeight. I'm looking for width. — Fergoso, Feb 23 '15 at 12:49

Anwar · Answer 1 · 2015-02-23T13:08:44.017

0

Use the .css("proprety", "value") JQuery Method to perform this.

Usage :

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

Usage (with variable) :

var myVariable = 1000; /* integer here */

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

edited Feb 23 '15 at 13:08

answered Feb 23 '15 at 12:50

Anwar

4,162
4
41
62

Thanks, this has a fixed width? – Fergoso Feb 23 '15 at 12:52
I set a fixed width, but you can use a variable instead, but I don't think it can run with integer, you should convert the variable into string first. – Anwar Feb 23 '15 at 12:54
That's similar to my question? Well... how do you suggest I get the value to replace 1000px? – Fergoso Feb 23 '15 at 13:00
@Fergoso do this $("#textareaB").css({"width": newWidth+"px"}); – dowomenfart Feb 23 '15 at 13:09
Does not resize its width. – Fergoso Feb 23 '15 at 13:15
@Fergoso Can you create a fiddle? And did Zeratops answer not help you? – dowomenfart Feb 23 '15 at 13:15
@Zeratops: I see you've edited your answer. Where does the `var myVariable = 1000;` come frome? Calculation? – Fergoso Feb 23 '15 at 13:18
@Donte'Trumble: No, it's same as your answer. – Fergoso Feb 23 '15 at 13:18
I set myself a variable, but we can imagine this variable is modifyied through different process. Like @Donte'Trumble suggests, create a fiddle by editing your question, it will let us know what is happening wrong. – Anwar Feb 23 '15 at 13:20
1

just created a fiddle and it works http://jsfiddle.net/y80jgnn5/. Focus on the bottom textarea and type. Textarea resizes. – dowomenfart Feb 23 '15 at 13:29

Dimag Kharab · Answer 2 · 2015-02-23T13:19:23.967

0

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

EDIT 2: (Increase textarea width)

note ::change the value '8' in if according to your need and best 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);
         };
     });

 });

edited Feb 23 '15 at 13:19

answered Feb 23 '15 at 12:56

Dimag Kharab

4,439
1
24
45

Thanks. This adjusts the height? I'm looking for a solution which adjust its width. – Fergoso Feb 23 '15 at 12:59
My requirement is to set the width of the textarea to the length of its text only. E.g.: if there is a 6 word sentence or a 2 word sentence I would want the textarea to be only to its length of text. I want to avoid any unwanted length of the textarea. – Fergoso Feb 23 '15 at 13:10

Resize textarea width while typing using keyup

2 Answers2