convert textbox to multiline with jquery

Question

I have a single line textbox.

I want to with jquery convert it to multiline but control how many lines that are added to it. I want to also be able to limit the number of characters on each line.

Any ideas how I can do this with jquery?

EDIT:

Yes what I meant by textbox was <input type="text">

EG. <input type="text" value="" name="txtTextBox1" id="xtTextBox1">

Acidulate

The term "textbox" is not specific enough. This seems to be ASP.NET specific. jQuery doesn't understand that. It only understands HTML. Don't you mean HTML <input type="text"> or maybe <textarea> ? – Kilbride

@Kilbride I would interpret it as turning an input type=text into a textarea. I think that can only be done by destroying the input, and creating a textarea of the same name. – Ezar

@Pekka: true, but there's ambiguity in the term and I judged that based on the OP's posthistory. It may happen that he already has a <textarea> with a "single line" restriction generated by some sort of MVC framework. – Kilbride

@Kilbride good point - and it's always better to ask for clarification and code, than guess. – Ezar

If you are looking to accomplish this yourself take a look at a very rudimentary example I whipped up at - jsfiddle.net/2msUj If you are looking for a plugin I would recommend taking a look at James Padolsey's work here - james.padolsey.com/javascript/jquery-plugin-autoresize – Kessia

Answer 1

Considering you have following HTML:

<input type="text" class="myclasses" style="color: #123123" value="akira"/> 

then using following snippet:

(function($) {
    $.fn.changeToTextArea = function(rows, columns) {
        var attrs = {};
        var text = "";

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
            if(attr.nodeName == "value") {
              text = attr.nodeValue;
              }
            attrs["rows"] = rows;
            attrs["cols"] = columns;
        });

        this.replaceWith(function() {
            return $("<textarea/>", attrs).append($(this).contents()).html(text);
        });
    }
})(jQuery);

You should call it with

$("input").changeToTextArea(7, 25);

(function($) {
    $.fn.changeToTextArea = function(rows, columns) {
        var attrs = {};
        var text = "";
      
        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
            if(attr.nodeName == "value") {
              text = attr.nodeValue;
              }
            attrs["rows"] = rows;
            attrs["cols"] = columns;
        });

        this.replaceWith(function() {
            return $("<textarea/>", attrs).append($(this).contents()).html(text);
        });
    }
})(jQuery);


$("input").changeToTextArea(7, 25);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" class="xyzxterms" style="color: #123131" value="akira"/>

Markitamarkka

Answer 2

Try add: rows="3" TextMode="MultiLine" attributes in the TextBox html code

Wolk