Solved

Auto select form text

Posted on 2007-11-16
17
879 Views
Last Modified: 2013-11-19
I have links on a page that hide and show layers which each contain a form with a text input box that is readonly. Now the value in the input box is a URL [usually quite long] which the user can select and copy but they have to scroll along the input box to select it as the input box is a fixed width. Is there any way I can auto select the link in the text box when the div is revealed.

I have included my javascript [that shows and hides] the layers which just uses an onclick function. I am wondering if the additional functionality will need to be added to this function somehow.

Thanks.
function getposOffset(overlay, offsettype){

var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;

var parentEl=overlay.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}
 

function overlay(curobj, subobjstr, opt_position){

if (document.getElementById){

var subobj=document.getElementById(subobjstr)

subobj.style.display=(subobj.style.display!="block")? "block" : "none"

var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 

var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)

subobj.style.left=xpos+"px"

subobj.style.top=ypos+4+"px"

return false

}

else

return true

}
 

function overlayclose(subobj){

document.getElementById(subobj).style.display="none"

}

Open in new window

0
Comment
Question by:Eternal_Student
  • 9
  • 6
  • 2
17 Comments
 
LVL 17

Expert Comment

by:gops1
ID: 20298616
you can say this:

<input type="text" value="texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext" onclick="this.select()">
0
 
LVL 17

Expert Comment

by:gops1
ID: 20298624
this.select() will select the entire text as soon as you give a click inside the text box
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20298625
subobj.focus();
subobj.select();

First, focus on the DOM element, then select the contents.
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 20299138
Thanks this.select would be one of making sure all of the text is selected BUT I wanted the text to be auto selected like Badotz functions SHOULD do although this doesn't work with the hide/show layer?
0
 
LVL 29

Accepted Solution

by:
Badotz earned 380 total points
ID: 20299266


This seems like it shold work:
 

function overlay(curobj, subobjstr, opt_position)

{

   if (document.getElementById)

   {

      var subobj=document.getElementById(subobjstr);

      subobj.style.display=(subobj.style.display!="block")? "block" : "none";

      var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) ;

      var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0);

      subobj.style.left=xpos+"px";

      subobj.style.top=ypos+4+"px";

      subobj.focus();

      subobj.select();

      return false;

   }

   else

      return true;

   }

}

Open in new window

0
 
LVL 29

Expert Comment

by:Badotz
ID: 20299276
subobj.focus();
subobj.select();

should happen after all other DOM manipulation has occurred.
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 20299296
You are indeed correct, I think it was just cached when I first tried, thanks.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20299316
No worries - glad to help.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 18

Author Comment

by:Eternal_Student
ID: 20299659
Actually I am trying this:

subobj.form.elements['TheText'].focus();
subobj.form.elements['TheText'].select();
return false

But with multiple layers and forms with the same name it is not highlighting them all as I require.

Any ideas?
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20299719
Only one element can have the focus at any given time; not so sure about that select, though...
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 20299778
So having this for multiple layers is impossible? If the focus changes that is ok as they will want to focus on the new layer anyhow, it's just I think i am getting the syntax wrong for focusing and selecting on a unique layer and its' form/input box.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20299812
Are you trying to copy the selected text automatically for the various layers, or merely highlight it when it gets the focus?
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 20299831
I want it to be highlighted when the layer is shown. Just so the user doesn't have to select it themselves.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20300015
You can add an event handler for the onfocus event that selects the value, too. Either a blanket handler for all <input> elements or one for each.
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 20311350
Would you be able to provide an example?
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20311436
Perhaps build a list of <inputs> as the layer is shown, then when all of the layer has been shown, spin through the list and select() the value of each <input>? That way, no event handler is required.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20311445
That would initially select each <input>, but I do not know if once the user tabbed into an <input> the others would stay selected.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now