By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,628 Members | 1,692 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,628 IT Pros & Developers. It's quick & easy.

Changing selected text in textarea

P: n/a
I have searched and searched and searched...

Can someone please tell me how (or "if" it is even possible) to change
selected text in a textarea?

Specifically, say a user has highlighted "ppl" of the word "apple",
using a mouse. Is there a way to have the (usally blue) highlight
expand to the character to the left and right of the original
highlight, which is to say, highlight the entire word?

I have looked at hundreds of pages talking about textranges and
manipulating the CONTENTS of text selections, but can find nothing that
actually literally changes the "highlighting" itself, only its virtual
contents.

Thank you,
A.L.

Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
function setSelectionRange(textElem, selectionStart, selectionEnd) {
if (textElem.setSelectionRange) { // FF
// textElem.focus(); // needed?
window.setTimeout(function(x,posL,posR){ // bug 265159
return function(){x.setSelectionRange(posL,posR);};}
(textElem,selectionStart,selectionEnd),100);
} else if (textElem.createTextRange) { // IE
var range = textElem.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}

This code, based on based on http://www.danbrown.ca/test/select.html,
works for me in FF 1.0.1 / IE 6. If you expand to other browsers / discover
improvements, please post a revised version.
That setTimeout is because of
https://bugzilla.mozilla.org/show_bug.cgi?id=265159

Csaba Gabor from Vienna
aq********@gmail.com wrote:
I have searched and searched and searched...

Can someone please tell me how (or "if" it is even possible) to change
selected text in a textarea?

Specifically, say a user has highlighted "ppl" of the word "apple",
using a mouse. Is there a way to have the (usally blue) highlight
expand to the character to the left and right of the original
highlight, which is to say, highlight the entire word?

I have looked at hundreds of pages talking about textranges and
manipulating the CONTENTS of text selections, but can find nothing that
actually literally changes the "highlighting" itself, only its virtual
contents.

Thank you,
A.L.

Jul 23 '05 #2

P: n/a


aq********@gmail.com wrote:

Specifically, say a user has highlighted "ppl" of the word "apple",
using a mouse. Is there a way to have the (usally blue) highlight
expand to the character to the left and right of the original
highlight, which is to say, highlight the entire word?


IE/Win has an API for the selection that creates a so called range over
the selection and such a range has various methods to manipulate it, one
of the method allows you to expand the range by a certain unit like a
word. The following should work with IE 5.5 and 6 on Windows, tested to
work with IE 6:

<html lang="en">
<head>
<title>Expanding the selection in IE to a word</title>
<script type="text/javascript">
function expandSelectionToWord (textControl) {
if (typeof document.selection != 'undefined' &&
typeof document.selection.createRange != 'undefined') {
var range = document.selection.createRange();
if (range.parentElement() == textControl && typeof range.expand !=
'undefined') {
range.expand('word');
range.select();
}
}
}
</script>
</head>
<body>

<h1>Expanding the selection in IE to a word</h1>

<form action="" onsubmit="return false;">
<div>
<textarea name="textareaName" rows="5" cols="80">
Kibology for all.
All for Kibology.
</textarea>
</div>
<div>
<input type="button" value="expand selection in textarea to word"
onclick="expandSelectionToWord(this.form.elements. textareaName);"
unselectable="on">
</div>
</form>

</body>
</html>

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #3

P: n/a
aq********@gmail.com wrote:
I have searched and searched and searched...

Can someone please tell me how (or "if" it is even possible) to change
selected text in a textarea?

Specifically, say a user has highlighted "ppl" of the word "apple",
using a mouse. Is there a way to have the (usally blue) highlight
expand to the character to the left and right of the original
highlight, which is to say, highlight the entire word?


A comment on what you are trying to do:

I'm guessing that you are going to select the whole word on mouseup
or similar (if not, totally ignore the following...).

MS Word has a similar feature to select whole words that is on by
default when Word is installed. It is one of the first things I
turn off because I find it really, really annoying to not be able to
select part of a word. So you may want to offer users a way of
turning this off - a checkbox should do the trick, then just test to
see if it's checked or not before doing this.

Just my $0.02 worth.

--
Rob.
Jul 23 '05 #4

P: n/a
Csaba Gabor and Martin Honnen for your input, espeically the link and
code!

While I am playing around with it, I thought I would give more
information on exactly what I need to do, in case you already know of
code that does it. (Specifically, Martin Honnen's name and code came
up many times while I have been researching this, so I know he is a
real expert on it!) And thanks for the suggestion, RobG, it is a good
one, although it doesn't really apply to my dilemma, as you will see.

I have built a Content Management System that allows users to enter
text and code into a textarea, which is then saved to a database to
make up the content of a page. Because there are HTML tags in the
textarea, sometimes when a user highlights content using the mouse, it
picks up part of a partial tag. Specifically, if a line is:

<span class=apple><b>A red fruit!</b></span>

and they try to highlight just "<b><A read fruit!</b>" using the mouse,
invariably the ">" from the opening span tag gets picked up.

I need code that will look at a selection, and if it contains "><" at
the start, or "><" at the end, to truncate the selection accordingly,
so partial tag selections are eleminated. (There may be other
possiblities too, as sometimes it picks up "></" at the end of a
selction, for instance.)

Anyway, thanks for the links and the code provided so far, it may be
enough to allow me to figure it out on my own. But if anyone else can
contribute I am eternally gratefull!

Thank you,
A.L.
PS: And for now, it does only need to work with IE. (It is used in a
coroprate intranet where all PC configs are the same, and have IE 5.5
or later.)

Jul 23 '05 #5

P: n/a
Using Martin Honnen's code, and helpfull advice/links from others, I
have a working solution that I am providing below. If others have
advice or other solutions, feel free to share!

Thanks everyone, especially Martin.

A.L.

<html lang="en">
<head>
<title>Restricting the selection in IE from partial HTML tags</title>
<script type="text/javascript">
function CorrectSelection (textControl)
{
if (typeof document.selection != 'undefined' && typeof
document.selection.createRange != 'undefined')
{
// grab highlight
var range = document.selection.createRange();
if (range.parentElement() == textControl && typeof range.expand
!= 'undefined')
{

// grab the content of highlight, and modify if necessary
var rangeContent = document.selection.createRange().text
// if it picks up partial tag at start, move one char right
if(rangeContent.substring(0,2)=='><')
range.moveStart('character', 1);
// if it picks up partial tag "<" at end, move one char left

if(rangeContent.substring(rangeContent.length-2,rangeContent.length)=='><')
range.moveEnd('character', -1);
// if it picks up partial tag "</" at end, move two chars
left

if(rangeContent.substring(rangeContent.length-2,rangeContent.length)=='</')
range.moveEnd('character', -2);
range.select();
}
}
}
</script>
</head>
<body>
<h1>Restricting the selection in IE from partial HTML tags</h1>
<form action="" onsubmit="return false;">
<div>
<textarea name="textareaName" rows="5" cols="80"
onMouseUp="CorrectSelection(this.form.elements.tex tareaName);"
<br><span class=headline>DEFAULT.ASP</span><br>

<u><span class=normal>Just some text...</span></u>
</textarea>
</div>
</form>
</body>
</html>

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.