使用jquery将文本框转换为多行答案

【问题标题】：convert textbox to multiline with jquery使用jquery将文本框转换为多行
【发布时间】：2011-04-03 21:34:16
【问题描述】：

我有一个单行文本框。

我想用 jquery 将它转换为多行但控制添加到它的行数。我还希望能够限制每行的字符数。

有什么想法可以用 jquery 做到这一点吗？

编辑：

是的，我所说的文本框是<input type="text">

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

【问题讨论】：

“文本框”一词不够具体。这似乎是 ASP.NET 特定的。 jQuery 不明白这一点。它只理解 HTML。你的意思是 HTML <input type="text"> 还是 <textarea> ？
@BalusC 我将其解释为将input type=text 转换为textarea。我认为这只能通过销毁输入并创建一个同名的文本区域来完成。
@Pekka：是的，但这个词有歧义，我根据 OP 的后历史来判断。他可能已经有一个<textarea>，其中包含某种 MVC 框架生成的“单行”限制。
@BalusC 好点 - 要求澄清和编码总是比猜测更好。
如果您想自己完成此任务，请查看我在 -jsfiddle.net/2msUj 编写的一个非常基本的示例 - 如果您正在寻找插件，我建议您在这里查看 James Padolsey 的工作- james.padolsey.com/javascript/jquery-plugin-autoresize

标签： jquery textbox multiline

【解决方案1】：

考虑到您有以下 HTML：

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

然后使用以下sn-p：

(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);

(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"/>

【讨论】：