使用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将文本框转换为多行的主要内容，如果未能解决你的问题，请参考以下文章