ASP.NET ComboBox - Knowledge Base

« Back to Knowledge Base list

Select / highlight text on focus

Q:

Is there a way to select (highlight) the text from the input field when focusing the ComboBox?

A:

You can use the "OnOpen" client-side event of the ComboBox to do this. First, set up an event handler for this event:

<obout:ComboBox ... >
        <ClientSideEvents OnOpen="ComboBox1_Open" />
</obout:ComboBox>


Then, declare these two JavaScript functions:

     <script type="text/javascript">
        var textBox = null;
        function ComboBox1_Open(sender) {
            var txt = getTextBox(sender);
            txt.select();  
        }

        function getTextBox(sender) {
            if (textBox == null) {
                var controls = document.getElementsByTagName('INPUT');
                for (var i = 0; i < controls.length; i++) {
                    if (controls[i].type == 'text' && controls[i].id.indexOf(sender.ID + 'TB') != -1) {
                        textBox = controls[i];
                    }
                }
            }

            return textBox;
        }
    </script>

"Thanks for your immediate response. You are an authentic professional."

Aris Vlotomas
AXIOM CONSULTING LIMITED

obout.com 
obout.com Home 
News 
ComboBox Home   
ComboBox Home 
Examples - 65
Appearance - 2 
Live Styles 
Different Styles New 
Autocomplete & Filtering - 2 
Autocomplete  
Filtering  
Load on Demand - 7 
Load Items on Demand 
Load Items on Demand with Paging  
Virtual Scrolling  
Initial Text New 
Initial Text on Client-Side New 
Load Items on Button Click New 
Load Items with MinChars New 
Multi-Columns - 4 
Grid-like Multi-Columns  
Multiple Rows and Columns  
Load multi Columns on Demand  
State Selector  
Items with Icons - 3 
Items with Icons  
Grid-like Multi-Columns with Icons  
Multiple Rows and Columns with Icons  
Templates - 3 
Item Templates  
Header Templates  
Populating with Data - 5 
Declarative  
SqlDataSource  
ObjectDataSource  
Generic Collections  
DataSet  
Item Selection - 6 
Single Item Selection  
Multi Item Selection  
Get Selected Item  
Get Selected Items  
Set Selected Item New 
Set Selected Items New 
Mode - 2 
ComboBox  
TextBox  
Master/Detail - 3 
Master/Detail  
Unlimited Detail Levels  
Cascading ComboBoxes  
Integration - 8 
Items with ASP.NET CheckBoxes  
Items with Obout CheckBoxes  
RadioButtons inside ComboBox  
TreeView inside ComboBox  
TreeView with Full Path New 
ComboBox inside Grid  
CheckBoxes Loaded On-Demand New 
Validate with ASP.NET Validators New 
Settings - 8 
AllowCustomText  
AllowEdit  
AutoPostback  
AutoValidate  
Height  
MenuWidth  
OpenOnFocus  
Width  
Server-Side API - 4 
Server-Side Events  
Enable / Disable  
Get Values from Multiple Columns New 
Tooltips New 
Client-Side API - 7 
Client-Side Events  
Add / Remove Items  
Add Multi-Column Items New 
Enable / Disable  
Get Selected Item  
Reset Selection New 
Select / Deselect All Items New 
Appearance Customization - 1 
Aligning Items New 
Knowledge Base - 1 
Knowledge Base 
Documentation - 13 
Server-Side 
ComboBox 
ComboBoxClientSideEvents 
ComboBoxCssSettings 
ComboBoxFilterType 
ComboBoxFooterTemlateContainer 
ComboBoxHeaderTemlateContainer 
ComboBoxItem 
ComboBoxItemEventArgs 
ComboBoxItemTemlateContainer 
ComboBoxLoadingItemsEventArgs 
ComboBoxMode 
Client-Side 
Client-Side API 
ChangeLog 
Tutorials - 2 
Appearance - 1 
CSS Tutorial  
Configuration - 1 
Using the correct path