Skip to main content
 首页 » 编程设计

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

2026年10月29日38pengyingh

我有一个单行文本框。

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

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

编辑:

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

EG。 <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"/>