473,390 Members | 1,693 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,390 software developers and data experts.

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 3986
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

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

Similar topics

1
by: Daniel Hill | last post by:
OK, I have very, VERY basic background knowledge of VB6 and have now upgraded to VB.NET and now I'm struggling to bring up the forms I want. What I am looking to do is to have a click a command...
1
by: Mike | last post by:
I have a combo box and a text box. Text to be display will be contigent upon what is selected via the combo box. How do I do this? I put the following code in the text box object: var a =...
4
by: Dan | last post by:
Can anyone offer suggestions on how to do this or if it is possible? I have a form that uses a drop down box and 2 text fields. What I am trying to do is have the value of each text box set by...
9
by: Megan | last post by:
Hi- I'm creating a database of music bands with their cds and songs. I'm trying to program an SQL statement so that I can enter a string of text in a textbox, press the 'Enter' key, and have...
14
by: Norm | last post by:
Hi, Each time the user selects an item from a combobox, I want that string to get appended to the values that were already selected. The result is that the combo is accumulating text each time...
4
by: Mark L. Breen | last post by:
Hello Guys and Galls, I use combos on my forms. The code to initialise the combos is as follows Dim dsPIDTypes As DataSet dsPIDTypes = PartDB.GetPIDTypes ' Returns a dataset object...
8
by: cj | last post by:
I asked this question a couple of days ago but am just now looking at it again. I used to use the textbox gotfoucs event to have all the text in the textbox selected when it gotfocus. That...
1
by: bbcdancer | last post by:
Is it possible to restrict the length of a text box in MS Access using VBA on condition to what is selected in a list combo box. Scenario: 1. I have a list combo box containing: AA BBB...
4
by: coldfusionstudent | last post by:
i wish to show/appear and dissappear text box based on a the drop down item selected. what do i have to add? thanks under Comm_DEV drop down selection.
18
by: Academia | last post by:
I let the use modify the text of a combobox and then I replace the selected item with the new text (in Keyup event). But if he sets the Text property to an empty string ("") that sets the...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.