计算Textarea字符并增加或减小TextArea的大小

Question

I want to allow user to enter upto 300 character and simultaneously. I want to increase textarea based on user text if he deletes text, decrease textarea

https://jsfiddle.net/yhqdhr3x/

 <div id="divChar">300</div>
 <textarea id="txtpostSearch" class="form-control" rows="3" ></textarea>

JQuery Code

$('#txtpostSearch').keyup(function () {                
    var txtCharCountLength = $(this).val().length;
    if (txtCharCountLength <= 300) {
        var remainingChar = 300 - txtCharCountLength;
        $("#divChar").html(remainingChar);
    }
});

Answer 1

In your initialisation, put the following to prevent errors (this is for what keeps it less than 300 chars):

oldVal = "";

If you use a monospace font, and know the number of chars that fit in a row, each time the letter is typed, you could do the following on each character typed.... this assumes you can fit 22 chars on each row...

// save the element as variable, just to access without typing as much
elem = document.getElementById('txtpostSearch');

//if the length is above 300, set it back to what the value was before
if(elem.length > 300){
    elem.value = elem.value.substring(0, 300);
}

// the length of the contents of the textarea
len = elem.value.length;
// the new number of rows in the textarea
// it is the number of rows completely filled by text, plus two
// plus two makes room for the row currently typing in, and one more empty row
rows = Math.floor(len / 22) + 2;
// sets the height as the number of rows in units of font size
elem.style.height = rows + 'em';

//store the value in case the next length is too large
oldVal = elem.value;

I made a little fiddle: https://jsfiddle.net/5w7gogqt/

This fiddle uses a font called ProFont (if you dont have it, the fiddle defaults to plain monospace), which always has a set size no matter what OS or browser you use. You can always use a webfont for your field, then people use that font even if they don't have it.

Answer 2

You can change the number of rows and columns of the text area using JQuery.

To limit the number of input characters there's maxlength but it doesn't work consistently on all browsers, as an alternative you can just truncate the content of the textbox with substring and change the value of the textbox.

Demo:

 $('#txtpostSearch').keyup(function() { var str = $(this).val(); var txtCharCountLength = str.length; if (txtCharCountLength <= 300) { var remainingChar = 300 - txtCharCountLength; $("#divChar").html(remainingChar); var rows = str.split("\\n"); var cols = rows.sort(function(a, b) { return b.length - a.length })[0].length; $(this).attr('rows', rows.length + 1); $(this).attr('cols', cols); } else { $(this).val($(this).val().substring(0, 300)); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="divChar">300</div> <textarea runat="server" class="form-control" cows="3" id="txtpostSearch"></textarea>