如何使共享点文本框(输入,类型=文本)动态多行

本文关键字:文本 类型 动态 输入 共享 何使 | 更新日期: 2023-09-27 17:57:06

我希望我的 Web 部件上有一个按需垂直增长的文本框。也就是说,它将是一行,除非用户为该行输入太多文本,此时它会自动换行并垂直增长以适应用户的冗长程度。

正在动态创建我的控件/元素,我像这样创建这个元素:

boxPaymentExplanation = new TextBox()
{
    CssClass = "dplatypus-webform-field-input"
};
boxPaymentExplanation.Width = 660;
boxPaymentExplanation.Style.Add("display", "inline-block");

我尝试添加此行,希望实现此功能:

boxPaymentExplanation.Style.Add("TextMode", "MultiLine");

。但它对文本框的行为没有明显的变化 - 我可以在其中输入文本"直到牛回到谷仓",但它只是不断将字符添加到文本框的末尾一行。它永远不会包裹,所以它永远不会增长。

更新

这是有效的jQuery(来自Christopher Jennings提供的链接):

$(document).on("keyup", "[id$=explainPaymentTextBox]", function (e) {
    while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height() + 1);
    };
});

。以及这个 C#:

boxPaymentExplanation = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    ID = "explainPaymentTextBox"
};
boxPaymentExplanation.Width = 660;
boxPaymentExplanation.Style.Add("display", "inline-block");
boxPaymentExplanation.TextMode = TextBoxMode.MultiLine;

更新 2

不幸的是,尽管上面的下降到mælström风格的jQuery适用于动态增长文本框,但如果用户删除文本,它就不起作用;我希望当这种情况发生时它也缩小...

如何使共享点文本框(输入,类型=文本)动态多行

你走在正确的轨道上。您需要将 TextMode 属性设置为"多行"。但是,您采用的方法是添加 HTML 标记属性,而不是设置 .NET 属性。只需将boxPaymentExplanation.Style.Add("TextMode", "MultiLine");替换为boxPaymentExplanation.TextMode = TextBoxMode.MultiLine;