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

global var doesn't capture text on mouseup

P: n/a


I've got a function, you can see it below, that is being called
onmouseup in the textarea on my main form. The idea is to find a
selection if possible and store that text in a global variable. I can't
get this to work in any browser on a Mac, though it works alright on a
PC. What am I missing?

// 01-24-05 - most of the time, with most browsers, you
can't get a selection from a form
// input with a function triggered with a form control
like a button, because clicking the
// button shifts the focus to the button and destroys
the selection. So I'm thinking that
// perhaps we can have a global variable that is set
with setFieldSelectionValue() which
// can be called onMouseUp(). This sets the value and
insertAtCursor() can check to see
// if that value is there.
var fieldValue = "";

function setFieldSelectionValue(myField) {
// 01-24-05 - this next line is meant to ensure
that we don't
// carry an old value forward.
fieldValue = "";

if (document.selection) {
if (document.selection.createRange) {
var range =
document.selection.createRange();
var fieldText = range.text;
} else if (document.selection.getRangeAt) {
// 01-24-05 - this next bit may work in
Mozilla
var range =
document.selection.getRangeAt(0);
if (range) {
if (range.text) {
var fieldText = range.text;
} else if (range.value) {
var fieldText = range.value;
}
}
} else if (document.selection.toString) {
var fieldText =
document.selection.toString();
}
} else if ('number' == typeof
myField.selectionStart) {
// MOZILLA/NETSCAPE support
//
myField.value.substring(myField.selectionStart,myF ield.selectionEnd)
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
if (myField.value.substring) {
if (endPos != 0) {
var fieldText =
myField.value.substring(startPos, endPos);
}
}
}
if (fieldText != "") fieldValue = fieldText;
}

xt bit may work in Mozilla
var range =
document.selection.getRangeAt(0);
if (range) {
if (range.text) {
var fieldText = range.text;
} else if (range.value) {
var fieldText = range.value;
}
}
} else if (document.selection.toString) {
var fieldText =
document.selection.toString();
}
} else if ('number' == typeof
myField.selectionStart) {
// MOZILLA/NETSCAPE support
//
myField.value.substring(myField.selectionStart,myF ield.selectionEnd)
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
if (myField.value.substring) {
if (endPos != 0) {
var fieldText =
myField.value.substring(startPos, endPos);
}
}
}
if (fieldText != "") fieldValue = fieldText;
}

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


P: n/a
lk******@geocities.com wrote:

I've got a function, you can see it below, that is being called
onmouseup in the textarea on my main form. The idea is to find a
selection if possible and store that text in a global variable. I can't
get this to work in any browser on a Mac, though it works alright on a
PC. What am I missing?

That document.selection and element.selectionStart don't work in
Safari or IE 5.2.

However, element.selectionStart does work in Firefox on Mac but if you
select from the start of the text, selectionStart returns undefined so
your test:

if ('number' == typeof myField.selectionStart) {

will fail.

Your method will also fail if the user selects all the text by clicking
in the field and uses Ctrl+A. It also stops double-clicking in the
field to select all the text.

The following play code works in Firefox 1.0 on Mac OS X (but not in
either Safari 1.0.3 or IE 5.2). It deals with selectionStart being
undefined if all the selection starts with the first character. Note
that if the user doesn't select anything, the start and end will have
the same value, and if the cursor is before the first character, both
selectionStart and selectionEnd will be undefined.

If the user selects some text, then clicks in the field, the function
will return the same value as if some text was still selected. I think
that qualifies as unreliable, but it's up to you.
<html><head><title>play</title>
<script type="text/javascript">

function setFieldSelectionValue(myField) {

(document.selection)?
alert('document.selection works') :
alert('document.selection doesn\'t work');

var start, end;
if(myField.selectionStart || myField.selectionEnd) {
if (myField.selectionStart) {
start = myField.selectionStart
} else {
start = 0;
}
end = myField.selectionEnd;
alert('Started at ' + start + '\nEnded at ' + end);
} else {
alert('selectionStart and selectionEnd not supported');
}
}
</script>
</head><body>
<form action="">
<textarea onmouseup="
setFieldSelectionValue(this);">Fred is a very fine fellow</textarea>
</form>
</body></html>

--
Fred
Jul 23 '05 #2

P: n/a
Fred Oz wrote:
[...]
Your method will also fail if the user selects all the text by clicking
in the field and uses Ctrl+A. It also stops double-clicking in the
field to select all the text. [...] If the user selects some text, then clicks in the field, the function
will return the same value as if some text was still selected. I think
that qualifies as unreliable, but it's up to you.


This can be avoided by adding setFieldSelectionValue as an
onclick to the submit button, or to any other button. As long
as the user clicks on the button immediately after making the
selection, it works.

The following code will report the selected range when either
"Show selection" or submit are clicked.

<html><head><title>play</title>
<script type="text/javascript">

function setFieldSelectionValue(myField) {
var start, end;
if(myField.selectionStart || myField.selectionEnd) {
if (myField.selectionStart) {
start = myField.selectionStart
} else {
start = 0;
}
end = myField.selectionEnd;
alert('Started at ' + start + '\nEnded at ' + end);
} else {
alert('selectionStart and selectionEnd not supported');
}
}
</script>
</head><body>
<form action="" onsubmit="
setFieldSelectionValue(this.form.tx1);">
<textarea name="tx1">Fred is a very fine fellow</textarea>
<br>
<button onclick="
setFieldSelectionValue(this.form.tx1);
">Show selection</button><br>
<input type="submit" onclick="
setFieldSelectionValue(this.form.tx1);">
</form>
</body></html>

--
Rob
Jul 23 '05 #3

P: n/a
Does it occur to anyone else that the way to do this is to work with the
mouseup event in the textarea itself always updating a hidden field to
the current selection. Then no issues if user deselects before clicking
a button (cause the mouseup fires and resets selection to nothing) and
no issues with loss of focus (because mouseup isn't fired when the focus
is lost).???? I'm not gonna build a full-fledged example but it only
seems reasonable.
In article <41f7a7c0$0$10554$5a62ac22@per-qv1-newsreader-
01.iinet.net.au>, rg***@iinet.net.auau says...
Fred Oz wrote:
[...]
Your method will also fail if the user selects all the text by clicking
in the field and uses Ctrl+A. It also stops double-clicking in the
field to select all the text.

[...]
If the user selects some text, then clicks in the field, the function
will return the same value as if some text was still selected. I think
that qualifies as unreliable, but it's up to you.


This can be avoided by adding setFieldSelectionValue as an
onclick to the submit button, or to any other button. As long
as the user clicks on the button immediately after making the
selection, it works.

The following code will report the selected range when either
"Show selection" or submit are clicked.

<html><head><title>play</title>
<script type="text/javascript">

function setFieldSelectionValue(myField) {
var start, end;
if(myField.selectionStart || myField.selectionEnd) {
if (myField.selectionStart) {
start = myField.selectionStart
} else {
start = 0;
}
end = myField.selectionEnd;
alert('Started at ' + start + '\nEnded at ' + end);
} else {
alert('selectionStart and selectionEnd not supported');
}
}
</script>
</head><body>
<form action="" onsubmit="
setFieldSelectionValue(this.form.tx1);">
<textarea name="tx1">Fred is a very fine fellow</textarea>
<br>
<button onclick="
setFieldSelectionValue(this.form.tx1);
">Show selection</button><br>
<input type="submit" onclick="
setFieldSelectionValue(this.form.tx1);">
</form>
</body></html>

Jul 23 '05 #4

P: n/a
--------------------
Does it occur to anyone else that the way to do this is to work with
the
mouseup event in the textarea itself always updating a hidden field to
the current selection.
-------------------

Interesting that you put it like that since that is what I thought I
was doing. Except that I was using a global var instead of a hidden
field. But the idea was the same, to store the info somewhere
onmouseup(), so as to avoid problems with loss of focus. That is how
the script works. The problem is that my function doesn't seem to be
capturing the info. Just to go over it again, my textarea gets declared
like this:

<div class="formInput"><textarea id="inputId5"
name="formInputs[cbMainContent]" style="height:200px; width:100%;"
class="textareaInput"
onmouseup="setFieldSelectionValue(this)"></textarea>
<p><a href="#inputId5" onclick="makeBigger(inputId5);">Make box
larger?</a></p></div>
and then setFieldSelectionValue was trying to capture that value like
this:

// 01-24-05 - most of the time, with most browsers, you can't get a
selection from a form
// input with a function triggered with a form control like a
button, because clicking the
// button shifts the focus to the button and destroys the selection.
So I'm thinking that
// perhaps we can have a global variable that is set with
setFieldSelectionValue() which
// can be called onMouseUp(). This sets the value and
insertAtCursor() can check to see
// if that value is there.
var fieldValue = "";

function setFieldSelectionValue(myField) {
// 01-24-05 - this next line is meant to ensure that we don't
// carry an old value forward.
fieldValue = "";

if (document.selection) {
if (document.selection.createRange) {
var range = document.selection.createRange();
var fieldText = range.text;
} else if (document.selection.getRangeAt) {
// 01-24-05 - this next bit may work in Mozilla
var range = document.selection.getRangeAt(0);
if (range) {
if (range.text) {
var fieldText = range.text;
} else if (range.value) {
var fieldText = range.value;
}
}
} else if (document.selection.toString) {
var fieldText = document.selection.toString();
}
} else if ('number' == typeof myField.selectionStart) {
// MOZILLA/NETSCAPE support
//
myField.value.substring(myField.selectionStart,myF ield.selectionEnd)
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
if (myField.value.substring) {
if (endPos != 0) {
var fieldText = myField.value.substring(startPos, endPos);
}
}
}
if (fieldText != "") fieldValue = fieldText;
}

Jul 23 '05 #5

P: n/a
John Doe wrote:
Does it occur to anyone else that the way to do this is to work with the
mouseup event in the textarea itself always updating a hidden field to
the current selection.
The original post was that it works OK on PC (presume Windows),
but not Mac. My (paraphrased) answer was that
document.selection and element.selectionStart do not work on Mac
for Safari and IE, and that Firefox has usability issues with
selections.
Then no issues if user deselects before clicking
a button (cause the mouseup fires and resets selection to nothing) and
no issues with loss of focus (because mouseup isn't fired when the focus
is lost).????
But other issues with using mouseup continue -

1. what if the selection is made using Ctrl+A?

2. using mouseup blocks double-clicking, a typical method of
selecting everything in the field.
I'm not gonna build a full-fledged example but it only
seems reasonable.


You should, then you'd know whether your suggestion works or
not.

--
Fred
Jul 23 '05 #6

P: n/a
This is for a software control panel, so I only need to get it working
in one Mac browser. I can tell users which browser to use. I'm dealing
with client in particular who is Mac based, and I'd like to get
something working for him this week. He's perfectly willing to use
whatever browser I suggest to him.

Jul 23 '05 #7

P: n/a
Much thanks to all your help. This is a good response and gives me
something to think about. I'm not sure I understand your concern here:

--------------------------
If the user selects some text, then clicks in the field, the function
will return the same value as if some text was still selected. I
think
that qualifies as unreliable, but it's up to you.
--------------------------

That is sort of the idea. Reading through Danny Goodman's book on
Javascript, I noticed that one can grab selections using Javascript,
but one usually can't manipulate those selections by clicking on form
inputs, because clicking a button shifts the focus and therefore
deselects the text (the exceptions are FireFox and IE on PC). I was
trying to think of ways around this, and I think someone here suggested
capturing selected text onmouseup(). It occured to me I could store the
selection in a global var, and then use that when someone clicks a
button. The idea is to wrap the text in an HTML tag, for instance, a
bold tag. The global fieldValue can be used as a last ditch resort if
the current browser is not FireFox or IE on a PC. In the following
function, we hope to be dealing with FireFox of IE on a PC, but if not,
at the end, we use whatever value has been stored to fieldValue. You
mention that this method of doing things is unreliable, if so, I'm
thinking that maybe another way to do this would be to use a prompt as
the last ditch effort, and ask the user to input whatever text they
want wrapped by the HTML tag they clicked on.

function insertAtCursor(myField, tag) {
// 01-24-05 - this first if() block is for Microsoft IE on PC
if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
if (range.text == '') {
alert("You haven't selected any text to change.");
} else {
range.text = '<' + tag + '>' + range.text + '<\/' + tag + '>';
}
} else if ('number' == typeof myField.selectionStart) {
// this next bit is for Netscape/Mozilla
//
myField.value.substring(myField.selectionStart,myF ield.selectionEnd)
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
if (endPos != 0) {
var mySelection = myField.value.substring(myField.selectionStart,
myField.selectionEnd);
mySelection = '<' + tag + '>' + mySelection + '<\/' + tag + '>';
myField.value = myField.value.substring(0, startPos) +
mySelection + myField.value.substring(endPos, myField.value.length);
} else {
alert("You haven't selected any text to change.");
}
} else {
// 01-24-05 - the above methods work in IE and Firefox on the PC.
For other
// browsers we try to use the fieldValue variable and append to
the end of the
// textarea. fieldValue is global and set onmouseup by
setSelectionFieldValue().
myField.value += '<' + tag + ' >' + fieldValue + '<\/' + tag +
'>';
}
}

Jul 23 '05 #8

P: n/a
We've set up a site as a demo site and a debugging site. You can see
what I'm trying to do here:

http://www.publicpen.com/designer/mcControlPanel.php

You'll need a username and password to get in. Use these:

username: designer
password: designer123

In invite everyone to go kick it around.

When you log in, you'll see a text area on the lower right side of the
screen. There are some formatting buttons there. The way it works in IE
and FireFox on a PC is you can select text and then it a formatting
button (like bold) and the javascript will wrap the text in some HTML
tags. I'm trying to get this to work in at least one browser on the
Mac.

Jul 23 '05 #9

P: n/a
lk******@geocities.com wrote:
We've set up a site as a demo site and a debugging site. You can see
what I'm trying to do here:

http://www.publicpen.com/designer/mcControlPanel.php

You'll need a username and password to get in. Use these:

username: designer
password: designer123

In invite everyone to go kick it around.


Once logged in with Firefox, clicking on a top menu items gives:

"Error: document.getElementById("mainPanel") has no properties
Source File:
http://www.publicpen.com/designer/mc...p?arrangement=
Line: 983"
You have a div with class="mainPanel", but none with that id.

The navigation seems hopeless, probably because of the failure of
the above. Anyway, eventually I got to a page with a text area
and buttons to format entered text.

It seems to work OK in Firefox for Mac OS X. Personally, I think
attempting an HTML editor this way is pointless. It is easy to
ceate crap, like <h5>blah<h5></h5></<h5>h5></<h5></h5>h5>.

Unless you are goning to parse and validate the HTML, why bother?

The markup you are adding is trivial to learn, but hey, it's your
page.
--
Fred
Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.