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 "highlighti ng" itself, only its virtual
contents.

Thank you,
A.L.

Jul 23 '05 #1

Subscribe Reply

10619

Csaba Gabor

function setSelectionRan ge(textElem, selectionStart, selectionEnd) {
if (textElem.setSe lectionRange) { // FF
// textElem.focus( ); // needed?
window.setTimeo ut(function(x,p osL,posR){ // bug 265159
return function(){x.se tSelectionRange (posL,posR);};}
(textElem,selec tionStart,selec tionEnd),100);
} else if (textElem.creat eTextRange) { // IE
var range = textElem.create TextRange();
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********@gmai l.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 "highlighti ng" itself, only its virtual
contents.

Thank you,
A.L.

Jul 23 '05 #2

Martin Honnen

aq********@gmai l.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>Expandin g the selection in IE to a word</title>
<script type="text/javascript">
function expandSelection ToWord (textControl) {
if (typeof document.select ion != 'undefined' &&
typeof document.select ion.createRange != 'undefined') {
var range = document.select ion.createRange ();
if (range.parentEl ement() == textControl && typeof range.expand !=
'undefined') {
range.expand('w ord');
range.select();
}
}
}
</script>
</head>
<body>

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

<form action="" onsubmit="retur n false;">
<div>
<textarea name="textareaN ame" rows="5" cols="80">
Kibology for all.
All for Kibology.
</textarea>
</div>
<div>
<input type="button" value="expand selection in textarea to word"
onclick="expand SelectionToWord (this.form.elem ents.textareaNa me);"
unselectable="o n">
</div>
</form>

</body>
</html>

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #3

RobG

aq********@gmai l.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>Restrict ing the selection in IE from partial HTML tags</title>
<script type="text/javascript">
function CorrectSelectio n (textControl)
{
if (typeof document.select ion != 'undefined' && typeof
document.select ion.createRange != 'undefined')
{
// grab highlight
var range = document.select ion.createRange ();
if (range.parentEl ement() == textControl && typeof range.expand
!= 'undefined')
{

// grab the content of highlight, and modify if necessary
var rangeContent = document.select ion.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(rang eContent.length-2,rangeContent. length)=='><')
range.moveEnd(' character', -1);
// if it picks up partial tag "</" at end, move two chars
left

if(rangeContent .substring(rang eContent.length-2,rangeContent. length)=='</')
range.moveEnd(' character', -2);
range.select();
}
}
}
</script>
</head>
<body>
<h1>Restricti ng the selection in IE from partial HTML tags</h1>
<form action="" onsubmit="retur n false;">
<div>
<textarea name="textareaN ame" rows="5" cols="80"
onMouseUp="Corr ectSelection(th is.form.element s.textareaName) ;"

<br><span class=headline> DEFAULT.ASP</span><br>

Jul 23 '05 #6

Similar topics

2135

putting selected text in textarea i a string

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 place the in a textarea selected text in the return of a function i like to believe is can be done. So how kan i put selected text in a string. tanks

PHP

524

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

2465

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 can even OBTAIN selected text?!?! I can do this in java if I have to, I know java better than javascript, it seems as that is the only way to do it from looking online. <-- me javascript beginner

Javascript

2492

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 solution. Thankyou -adnan

Javascript

2107

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 selected text. Am I doing something really stupid? Also, all I really want to do is implement the function addParagraphTags(component) (and other similar functions), if there is an easier way to do these that is cross-compatible, please let me know. ...

Javascript

2770

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 out. here is the code <html> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var captured = ""; function captext() {

Javascript

5613

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 alterations (according to rules specified elsewhere) then replace the original selection with the new text. I've got everything working great (displays exactly what I want in a

Javascript

8832

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9558

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9378

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9331

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9253

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8250

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

3316

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2791

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2216

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General