How can I make two textboxes appear as one?

Question

<asp:TextBox id="txtComment" runat="server" Columns="50" MaxLength="50" />
<asp:TextBox id="txtComment2" runat="server" Columns="50" MaxLength="50" />

I have the two textboxes above on a web form. How can I mash them together and make them appear as one text box?

Answer 1

Did you try making a user control or custom control ? Ideally, create a user control with both your text-boxes and apply the following styling so that they appear together.

First Text box

border-right-width: 0 px

Second Text box

border-left-width: 0 px

Answer 2

You can try putting them right next to each other on the page and styling their borders so they either have no border or the touching sides have no borders.

Answer 3

#txtComment, #txtComment2 {margin:0;padding:0; display-inline; border:none}

Answer 4

Assuming what you actually want is an imperceptible difference between the first and second fields: why not make one textbox, and split it server-side; e.g.

<asp:TextBox id="txtComment" runat="server" Columns="50" MaxLength="50" Visible="false" />
<asp:TextBox id="txtComment2" runat="server" Columns="50" MaxLength="50" Visible="false"/>
<asp:TextBox id="shownTxtComment" runat="server" Columns="100" MaxLength="100"/>

private void splitComment()
{
txtComment.Text = String.Left(shownTxtComment.Text, 49); //first 50 characters
txtComment2.Text = String.Mid(shownTxtComment.Text, 50); //characters 51 thru end
}

call splitComment() in your postback function, and you'll keep the hidden fields up-to-date on every postback.

You might also consider doing the same thing client-side with javascript.

*a cleaner approach would be to remove the txtComment2 web control altogether, set txtComment length to 100, and simply split/handle the substrings on the server, but since it's not altogether clear why you actually want two separate textboxes to look like one textbox, I can't say whether that addresses your need.

Answer 5

I guess I am curious as to why you would want to do this. As Thomas mentioned, it seems to go against usability. Are you looking for something like TextArea