Solved

Auto select form text

Posted on 2007-11-16
17
889 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
Industry Leaders: 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!

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

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

679 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