How can I make a Sharepoint textbox (input, type=text) dynamically Multiline?

问题

I want a textbox on my Web Part that will grow vertically on demand. That is, it will be one line unless the user enters too much text for that line, at which point it word wraps and grows vertically to accommodate the verbosity of the user.

I am creating my controls/elements dynamically, and I create this element like so:

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

I tried adding this line, in the hopes of achieving this functionality:

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

...but it makes no apparent change to the textbox's behavior - I can enter text into it "until the bovines come back to the barn" but it simply keeps adding the characters to the end of the textbox on a single row. It never wraps, so it never grows.

UPDATE

This is the jQuery that works (derived from the link that Christopher Jennings provided):

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

...along with this C#:

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

UPDATE 2

Unfortunately, although the descent-into-the-mælström-esque jQuery above works for dynamically growing the textbox, it doesn't work if the user removes text; I would like it also to shrink when that happens...

回答1:

You're on the right track. You need to set the TextMode property to Multiline. However, the approach you took is to add an HTML tag attribute rather than set the .NET property. Simply replace boxPaymentExplanation.Style.Add("TextMode", "MultiLine"); with boxPaymentExplanation.TextMode = TextBoxMode.MultiLine;

来源：https://stackoverflow.com/questions/30926250/how-can-i-make-a-sharepoint-textbox-input-type-text-dynamically-multiline

标签

jquery

html

multiline

word-wrap