如何为ASP TextBox添加右下角拖拽调整尺寸功能？

Absolutely! You can add that drag-to-resize functionality to your TextBox—there are two main approaches depending on whether you’re okay with a multi-line input (the easiest route) or need to keep it single-line (requires a bit of custom code). Let’s break them down:

Option 1: Use MultiLine TextBox (Native Browser Resize) #

If multi-line input is acceptable, this is the simplest solution. ASP.NET’s TextBox with TextMode="MultiLine" renders as an HTML <textarea>, which most browsers automatically equip with a drag resize handle. Here’s how to update your control:

<div class="control">
    <asp:TextBox runat="server" ID="TextBox1" Width="100%" EnableViewState="false" ViewStateMode="Disabled" 
        TextMode="MultiLine" Rows="3" /> <!-- Added TextMode and Rows for initial height -->
    <asp:Label runat="server" ID="Label1" Visible="false" ViewStateMode="Disabled" EnableViewState="false" AssociatedControlID="TextBox1" />
</div>

You can tweak the resize behavior with CSS if you want to restrict it to vertical/horizontal only:

/* Allow vertical resizing only */
#TextBox1 {
    resize: vertical;
}

/* Allow horizontal resizing only */
#TextBox1 {
    resize: horizontal;
}

This uses the browser’s native functionality, so no extra JavaScript is needed—it just works out of the box.

Option 2: Custom Resize for Single-Line TextBox #

If you need to keep the TextBox as single-line (the default TextMode="SingleLine"), you’ll need to add a custom resize handle with CSS and JavaScript. Here’s a step-by-step implementation:

Step 1: Update the Markup #

Wrap your TextBox in a container and add a resize handle element:

<div class="control resize-container">
    <asp:TextBox runat="server" ID="TextBox1" Width="300px" EnableViewState="false" ViewStateMode="Disabled" /> <!-- Changed to fixed width for easier resizing -->
    <div class="resize-handle"></div> <!-- The drag handle -->
    <asp:Label runat="server" ID="Label1" Visible="false" ViewStateMode="Disabled" EnableViewState="false" AssociatedControlID="TextBox1" />
</div>

Step 2: Add CSS Styling #

Style the container and handle to make it look and behave like a native resize control:

.resize-container {
    position: relative;
    display: inline-block;
}

#TextBox1 {
    box-sizing: border-box;
    padding-right: 20px; /* Make space for the handle */
}

.resize-handle {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    background: #ccc;
    border-bottom-right-radius: 2px;
    cursor: ew-resize; /* Show horizontal resize cursor */
}

.resize-handle:hover {
    background: #999; /* Darken on hover for better UX */
}

Step 3: Add Drag Resize Logic #

Add this JavaScript to handle the drag event and update the TextBox width:

document.addEventListener('DOMContentLoaded', () => {
    const container = document.querySelector('.resize-container');
    const textBox = document.getElementById('TextBox1');
    const handle = document.querySelector('.resize-handle');
    
    let isResizing = false;
    let startX, startWidth;

    handle.addEventListener('mousedown', (e) => {
        isResizing = true;
        startX = e.clientX;
        startWidth = parseInt(window.getComputedStyle(textBox).width);
        document.body.style.cursor = 'ew-resize';
        e.preventDefault(); // Prevent text selection during drag
    });

    document.addEventListener('mousemove', (e) => {
        if (!isResizing) return;
        const deltaX = e.clientX - startX;
        const newWidth = startWidth + deltaX;
        // Set a minimum width to avoid making it too small
        if (newWidth >= 150) {
            textBox.style.width = `${newWidth}px`;
        }
    });

    document.addEventListener('mouseup', () => {
        isResizing = false;
        document.body.style.cursor = '';
    });
});

This script listens for mouse events on the handle, calculates the new width as you drag, and updates the TextBox accordingly. You can adjust the minimum width (150px in the example) to fit your needs.

Quick Notes #

• The multi-line approach is always recommended if possible—it’s more reliable and requires zero custom code.
• For the single-line method, using a fixed initial width (instead of 100%) makes the resizing logic simpler, but you can modify the script to handle percentage widths if needed.

内容的提问来源于stack exchange，提问作者lanes123