Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 901
  • 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
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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