469,273 Members | 1,765 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,273 developers. It's quick & easy.

How to set text box's text to be selected

74
Hi there!

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

Thanks!

-LilOlMe
May 24 '07 #1
9 3785
acoder
16,027 Expert Mod 8TB
Welcome to TSDN!

Use the select() method.
May 25 '07 #2
lilOlMe
74
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:
Expand|Select|Wrap|Line Numbers
  1. function SetWhichTextBoxHasFocus(name)
  2. {
  3.      document.getElementById('txtBoxWithFocus').value = name;
  4.      document.getElementById(name).select();
  5. }
  6.  
While this does:
Expand|Select|Wrap|Line Numbers
  1. function SetWhichTextBoxHasFocus(name)
  2. {
  3.      document.getElementById('txtBoxWithFocus').value = name;
  4.      document.getElementById('txtBoxWithFocus').select();
  5. }
  6.  
May 25 '07 #3
gits
5,390 Expert Mod 4TB
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:
Expand|Select|Wrap|Line Numbers
  1. function SetWhichTextBoxHasFocus(name)
  2. {
  3.      document.getElementById('txtBoxWithFocus').value = name;
  4.      document.getElementById(name).select();
  5. }
  6.  
While this does:
Expand|Select|Wrap|Line Numbers
  1. function SetWhichTextBoxHasFocus(name)
  2. {
  3.      document.getElementById('txtBoxWithFocus').value = name;
  4.      document.getElementById('txtBoxWithFocus').select();
  5. }
  6.  
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 ...
May 25 '07 #4
lilOlMe
74
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:
Expand|Select|Wrap|Line Numbers
  1.  document.getElementById('txtBoxWithFocus').value = name;
  2.  
Or am I wrong here?
May 25 '07 #5
lilOlMe
74
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:
Expand|Select|Wrap|Line Numbers
  1.  <input  type="text" value="00" maxlength="2" id="ctl00_cph_mainContent_TPKR_Holiday3_TXT_HrStart" OnFocus="SetWhichTextBoxHasFocus('ctl00_cph_mainContent_TPKR_Holiday3_TXT_HrStart');"  />
  2. <input  type="text" value="00" maxlength="2" id="ctl00_cph_mainContent_TPKR_Holiday3_TXT_MinStart" OnFocus="SetWhichTextBoxHasFocus('ctl00_cph_mainContent_TPKR_Holiday3_TXT_MinStart');"  />
  3.  
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.

Expand|Select|Wrap|Line Numbers
  1. function SetWhichTextBoxHasFocus(name)
  2. {
  3.     document.getElementById('txtBoxWithFocus').value = name;
  4.     document.getElementById('txtBoxWithFocus').select(  );
  5. }
  6.  
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
May 25 '07 #6
acoder
16,027 Expert Mod 8TB
To set the variable txtBoxWithFocus:
Expand|Select|Wrap|Line Numbers
  1. var txtBoxWithFocus = name;
Then to select:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById(txtBoxWithFocus).select()
though to be honest I don't know why you want to do it like that, unless I've misunderstood.
May 25 '07 #7
lilOlMe
74
To set the variable txtBoxWithFocus:
Expand|Select|Wrap|Line Numbers
  1. var txtBoxWithFocus = name;
Then to select:
Expand|Select|Wrap|Line Numbers
  1. 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.

Expand|Select|Wrap|Line Numbers
  1. Start Time: [textboxHrs][textboxMinutes]{buttons up and down}
  2. End Time: [textboxHrs][textboxMinutes]{buttons up and down}
  3.  
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
May 25 '07 #8
lilOlMe
74

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
May 25 '07 #9
gits
5,390 Expert Mod 4TB
Ok I completely don't understand what you're trying to tell me.

...

Expand|Select|Wrap|Line Numbers
  1. function SetWhichTextBoxHasFocus(name)
  2. {
  3.     document.getElementById('txtBoxWithFocus').value = name;
  4.     document.getElementById('txtBoxWithFocus').select(  );
  5. }
  6.  
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:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('txtBoxWithFocus').value = name;
  2.  
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?
May 26 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Daniel Hill | last post: by
1 post views Thread by Mike | last post: by
4 posts views Thread by Mark L. Breen | last post: by
8 posts views Thread by cj | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.