Changing selected text in textarea

aqualizard

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

Subscribe Post Reply

10558

Csaba Gabor

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

Martin Honnen

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

RobG

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

aqualizard

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

aqualizard

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>

Jul 23 '05 #6

by: R.G. Vervoort | last post by:

Is it possible to change selected text in a textarea without using java and only php or html. There are lots of solutions in a javascript but i would like to try it without. If it is possible to...

PHP

selected text

by: Rob | last post by:

Hello all Is it possible to get which text in a textarea element is selected ? If so How? Thanks Rob

Javascript

does javascript allow you to obtain selected text?

by: gooderthanyou | last post by:

I have a textfield and you of course you can select text... When they hit the bold button I want it to obtain the selected text and bold it, the hard part is trying to figure out if javascript...

Javascript

finding cordinates of selected text

by: Adnan Siddiqi | last post by:

Hi Pardon me if I am not making any sense.What I want to know the cordinates of selected text by user so that i can save/retrieve them later.is It possible.I am lookig for both IE and Firefox...

Javascript

Manipulating selected text in a TEXTAREA...

by: Daniel Pitts | last post by:

Why doesn't this work? I create an object which is supposed to handle the selection in both IE and Firefox, but everytime I call getText() in firefox, I get the whole textarea, not just the...

Javascript

capture selected text from a page

by: destiny007 | last post by:

can any one help me to write code to capture selected text from a page but problem is that i am not able to decide where to call the functio.in this case the function is called in all cases of mouse...

Javascript

Replace selected text in a textarea?

by: King of the R.O.U.S.'s | last post by:

Hi All How do I replace selected text in a textarea with JavaScript? I have a text area that the user can select what they want then press a button that will pick up the selected text, make...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Changing selected text in textarea

Similar topics