...

View Full Version : Highlight/Select Text



EZE
01-23-2007, 10:21 PM
I have been trying to have a link select a div tag and the text inside it with javascript, and when I click the link, nothing happens. Here is my jscript and a sample combined:

<script type="text/javascript">
function code_select(obj){
var itm = document.getElementById(obj);
itm.select();
}
</script>
<a href="javascript:code_select('code1');">Select</a>
<div id="code1">Text To Highlight/Select</div> How can I have the link select the text without using <textarea>s?

david_kw
01-23-2007, 11:41 PM
I thought that only worked in <textarea> or <input type=text"> tags. I read you can get what is selected using window.getSelection() but I'm not aware of anyway to change the selection.

david_kw

EZE
01-24-2007, 03:35 AM
Okay, then, I will use a textarea, but how can I(with any code, php, javascript) expand the textarea height to match the text, so the scrollbar never shows up?

ChanLFC
01-24-2007, 04:14 AM
Hello EZE,
You can always make a text appear like selected by using css. In this case, your code would look like,

<script type="text/javascript">
function code_select(obj){
var itm = document.getElementById(obj);
itm.style.background = "#ff0000"; //would set the background to green
}
</script>
<a href="javascript:code_select('code1');">Select</a>
<div id="code1">Text To Highlight/Select</div>

EZE
01-24-2007, 12:40 PM
Yeah, but I want people to be able to press the highlight code button, then be able to copy the code.

jkd
01-24-2007, 03:06 PM
IE:


var range = document.body.createTextRange();
range.moveToElementText(myDiv);
range.select();


Firefox, Opera, WebKit nightlies:


var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(myDiv);
selection.removeAllRanges();
selection.addRange(range);


Safari:


var selection = window.getSelection();
selection.setBaseAndExtent(myDiv, 0, myDiv, 1);


This is for any sort of element in general.

EZE
01-24-2007, 09:49 PM
Okay, I tried the Firefox Script, and it didn't work. Here is what I have:

<script type="text/javascript">
function code_select(obj){
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
</script>
<a href="javascript:code_select('code1');">Select</a>
<div id="code1">Text To Highlight/Select</div>

david_kw
01-24-2007, 10:01 PM
Neat. I didn't know you could do that. :) Here is the FF version and it worked for me. You had a minor but and were trying to use the id string name as the object in your code.



<html>
<head>
<title>Junque</title>
<script type="text/javascript" src="dscommon.js"></script>
<script type="text/javascript">
function code_select(sId){
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(document.getElementById(sId));
selection.removeAllRanges();
selection.addRange(range);
}
</script>
</head>
<body>
<div>
<a href="javascript:code_select('code1');">Select</a>
<div id="code1">Text To Highlight/Select</div>
</div>
</body>
</html>


david_kw

EZE
01-24-2007, 10:08 PM
Awesome! It worked! Thanks jkd, david kw, and ChanLFC!

david_kw
01-24-2007, 10:11 PM
Here is a version that worked for me in FF1.5, IE6, IE7, and Opera. I don't have Safari to test it but it likely works.



<html>
<head>
<title>Select Document Text</title>
<script type="text/javascript">
function codeSelect(sId){
var myDiv = document.getElementById(sId);
if (window.getSelection) {
var selection = window.getSelection();
if (selection.setBaseAndExtent) { /* for Safari */
selection.setBaseAndExtent(myDiv, 0, myDiv, 1);
} else { /* for FF, Opera */
var range = document.createRange();
range.selectNodeContents(myDiv);
selection.removeAllRanges();
selection.addRange(range);
}
} else { /* for IE */
var range = document.body.createTextRange();
range.moveToElementText(myDiv);
range.select();
}
}
</script>
</head>
<body>
<div>
<a href="javascript:codeSelect('code1');">Select</a>
<div id="code1">Text To Highlight/Select</div>
</div>
</body>
</html>


david_kw



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum