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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jquery将文本框转换为多行相关的知识,希望对你有一定的参考价值。

我有一个单行文本框。

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

我有什么想法可以用jquery做到这一点?

编辑:

是的我的意思是文本框是<input type="text">

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

答案

考虑到您有以下html

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

然后使用以下代码段:

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

以上是关于使用jquery将文本框转换为多行的主要内容,如果未能解决你的问题,请参考以下文章

PHP:多行文本框的便捷小片段

使用JQuery将表格单元格转换为文本框

将 jQuery 代码转换为 Javascript

26个jQuery代码片段使用技巧

如何将我的 jQuery 代码转换为 AngularJS?

如何将多行标签xml文件转换为数据框