How to set text box's text to be selected

[lilOlMe]

Hi there!

I was wondering if it is possible to select all of the text in an <input type="text"> element onFocus?

Thanks!

-LilOlMe

[acoder]

Welcome to TSDN!

Use the select() method.

[lilOlMe]

Welcome to TSDN!

Use the select() method.

Thank you Acoder!

I knew about the select() function before but it wasn't working. I have found something that does work but I'm confused as to why this doesn't work:

function SetWhichTextBoxHasFocus(name)
{
     document.getElementById('txtBoxWithFocus').value = name;
     document.getElementById(name).select();
}
 

While this does:

function SetWhichTextBoxHasFocus(name)
{
     document.getElementById('txtBoxWithFocus').value = name;
     document.getElementById('txtBoxWithFocus').select();
}
 

[gits]

Thank you Acoder!

I knew about the select() function before but it wasn't working. I have found something that does work but I'm confused as to why this doesn't work:

function SetWhichTextBoxHasFocus(name)
{
     document.getElementById('txtBoxWithFocus').value = name;
     document.getElementById(name).select();
}
 

While this does:

function SetWhichTextBoxHasFocus(name)
{
     document.getElementById('txtBoxWithFocus').value = name;
     document.getElementById('txtBoxWithFocus').select();
}
 

you set the value of your textbox 'txtBoxWithFocus' first, and then you try to get the element ... but the id of it still is 'txtBoxWithFocus' ... so the second of your lines will not work until you get the element by ID!

i assume that name != 'txtBoxWithFocus' :) of course

kind regards ...

[lilOlMe]

you set the value of your textbox 'txtBoxWithFocus' first, and then you try to get the element ... but the id of it still is 'txtBoxWithFocus' ... so the second of your lines will not work until you get the element by ID!

i assume that name != 'txtBoxWithFocus' :) of course

kind regards ...

actually .........it does........... because I do:

 document.getElementById('txtBoxWithFocus').value = name;
 

Or am I wrong here?

[lilOlMe]

you set the value of your textbox 'txtBoxWithFocus' first, and then you try to get the element ... but the id of it still is 'txtBoxWithFocus' ... so the second of your lines will not work until you get the element by ID!

i assume that name != 'txtBoxWithFocus' :) of course

kind regards ...

Ok I completely don't understand what you're trying to tell me.
I call the SetWhichTextBoxHasFocus here:

 <input  type="text" value="00" maxlength="2" id="ctl00_cph_mainContent_TPKR_Holiday3_TXT_HrStart" OnFocus="SetWhichTextBoxHasFocus('ctl00_cph_mainContent_TPKR_Holiday3_TXT_HrStart');"  />
<input  type="text" value="00" maxlength="2" id="ctl00_cph_mainContent_TPKR_Holiday3_TXT_MinStart" OnFocus="SetWhichTextBoxHasFocus('ctl00_cph_mainContent_TPKR_Holiday3_TXT_MinStart');"  />
 

So the name of the text input element that has focus is passed to the SetWhichTextBoxHasFocus() function. I do this because I have some buttons that will change the value of a text element depending on which had focus last... since the focus changes to the button when the user clicks it.

Anyways, so the name of text element that currently has focus is passed to the SetWhichTextBoxHasFocus() function.

Then I set the variable 'txtBoxWithFocus' to be equal to that name.
Then I try to select the contents of the text element by using the variable I just set....which is equal to the name I passed in, which is equal to the name of the text element.

function SetWhichTextBoxHasFocus(name)
{
    document.getElementById('txtBoxWithFocus').value = name;
    document.getElementById('txtBoxWithFocus').select(  );
}
 

So why does the select work when I use the name parameter passed in, but not the variable that I just set?

I still don't understand.

-LilOlMe

[acoder]

To set the variable txtBoxWithFocus:

var txtBoxWithFocus = name;

Then to select:

document.getElementById(txtBoxWithFocus).select()

though to be honest I don't know why you want to do it like that, unless I've misunderstood.

[lilOlMe]

To set the variable txtBoxWithFocus:

var txtBoxWithFocus = name;

Then to select:

document.getElementById(txtBoxWithFocus).select()

though to be honest I don't know why you want to do it like that, unless I've misunderstood.

I've created a control that lets you control time with buttons.
It lets you set a time period.

Start Time: [textboxHrs][textboxMinutes]{buttons up and down}
End Time: [textboxHrs][textboxMinutes]{buttons up and down}
 

I had to control either the textboxHrs or the textboxMinutes when the user clicked the up or down button. (This is why I had to store the name of the text box, because the text box's focus is lost when the user clicks the button)

The problem was that the user couldn't really tell which text box the button was going to change.
Also the user couldn't just click on the text box and enter a time because of the max length restrictions.

So I've written a little code that selects the text box's contents and stores the name of that text box (to indicate to the button that it should be changed) when it has focus...

I reselected the text when the user clicked the buttons to make sure the user knew which text box was being changed.

Its really a cute little control.
They are added to the web page dynamically through a .NET application.

I'm sure there's an easier way to solve this problem, but I'm very new to JavaScript so I have to do things the hard way first.

Now that its working perfectly I'd love to show it off...but I can't post all the code here.

-LilOlMe

[lilOlMe]

Now that its working perfectly I'd love to show it off...but I can't post all the code here.

Maybe I'll write an article for you guys showing step by step how to create this control.

It has a lot of stuff in it:

• uses JavaScript to create a text box mask that only accepts numbers
• changes the value of a text box
• selects text in text boxes....

It'd be really long though...doesn't fit in one post.

-LilOlMe

[gits]

Ok I completely don't understand what you're trying to tell me.

...

function SetWhichTextBoxHasFocus(name)
{
    document.getElementById('txtBoxWithFocus').value = name;
    document.getElementById('txtBoxWithFocus').select(  );
}
 

So why does the select work when I use the name parameter passed in, but not the variable that I just set?

I still don't understand.

-LilOlMe

i think you probably get it now ... but i want to explain it to you:

using:

document.getElementById('txtBoxWithFocus').value = name;
 

sets the value of the element that has the id = 'txtBoxWithFocus' ... and nothing more. if you would do that with an input-field shown on a html-page you will see that the content of that box is set with this code ... and the content would be the value of your variable name. but of course you have to have an inputbox with an id that is 'txtBoxWithFocus' ...

acoder showed you how to set a variable ... using 'txtBoxWithFocus' will not work, until that is a simple string ... and getElementById would try to get an element with that string as id.

hope this helps to understand?