Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 903
  • Last Modified:

Auto select form text

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
Eternal_Student
Asked:
Eternal_Student
Advertise Here
  • 9
  • 6
  • 2
1 Solution
 
gops1Commented:
you can say this:

<input type="text" value="texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext" onclick="this.select()">
0
 
gops1Commented:
this.select() will select the entire text as soon as you give a click inside the text box
0
 
BadotzCommented:
subobj.focus();
subobj.select();

First, focus on the DOM element, then select the contents.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Sign Up
 
Eternal_StudentAuthor Commented:
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
 
BadotzCommented: 


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
 
BadotzCommented:
subobj.focus();
subobj.select();

should happen after all other DOM manipulation has occurred.
0
 
Eternal_StudentAuthor Commented:
You are indeed correct, I think it was just cached when I first tried, thanks.
0
 
BadotzCommented:
No worries - glad to help.
0
 
Eternal_StudentAuthor Commented:
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
 
BadotzCommented:
Only one element can have the focus at any given time; not so sure about that select, though...
0
 
Eternal_StudentAuthor Commented:
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
 
BadotzCommented:
Are you trying to copy the selected text automatically for the various layers, or merely highlight it when it gets the focus?
0
 
Eternal_StudentAuthor Commented:
I want it to be highlighted when the layer is shown. Just so the user doesn't have to select it themselves.
0
 
BadotzCommented:
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
 
Eternal_StudentAuthor Commented:
Would you be able to provide an example?
0
 
BadotzCommented:
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
 
BadotzCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Access It Now
  • 9
  • 6
  • 2
Advertise Here
Tackle projects and never again get stuck behind a technical roadblock.
Join Now