Exact match. Not showing close matches.
PICList
Thread
'[EE] IE textRange guru needed'
2006\02\14@134623
by
James Newton, Host
Is anyone out there really good with Internet Explorer scripting in the
document.selection / textRange area?
I'm trying to add a nice little formatting bar to the form at the bottom of
each page on the piclist.com site. This is to help people who don't
understand HTML to add things like bold, italic, etc... To the text they are
posting.
The goal is to make it such that it fails gracefully and yet takes advantage
of browser features as available. As it stands, a non-JavaScript browser
will never see the formatting buttons. A minimal browser will only be able
to have the formatting codes appended to the end of the text. The ideal
thing, and what I expect from IE, would be that when the user hits the
button for bold, if there is text selected, it puts <b> </b> around the text
and if there is no text selected, it just inserts the <b></b> and then:
/moves the cursor to the center so you can start typing bold text/. E.g. if
the | is the cursor, when there is no text selected, it should end up like
this: <b>|</b>.
I hope that makes sense. Now, I have all that working in IE /except/ for the
part about the position of the cursor. One is supposed to be able to move
the thing with the .move("character",distance) method to a textRange object
where distance is the negative or positive number of characters to move. And
I have seen it work before, but for some.... amazingly frustrating...
reason, it will not work here.
If you want to see the current state of it, just go to piclist.com and
scroll to near the bottom and look at the little form. The source for that
part is reproduced below. Any suggestions very appreciated.
---
James Newton: PICList webmaster/Admin
spam_OUTjamesnewtonTakeThisOuT
piclist.com 1-619-652-0593 phone
http://www.piclist.com/member/JMN-EFP-786
PIC/PICList FAQ: http://www.piclist.com
<SCRIPT>
<!--- Hide script from old browsers.
function doStartEnd(anArea, startTxt, endTxt ) {
if (document.selection) {
anArea.focus();
var aSel = ( anArea.caretPos ? anArea.caretPos :
document.selection.createRange() );
if (aSel.text.charAt(aSel.text.length-1)==' ')
aSel.moveEnd('character',-1);
aSel.text = startTxt + aSel.text + endTxt;
anArea.createTextRange().move("character",-4);
}
else if (typeof(textarea.selectionStart) != "undefined") {
// Mozilla text range replace.
var text = new Array();
text[0] = anArea.value.substr(0, anArea.selectionStart);
text[1] = anArea.value.substr(anArea.selectionStart,
anArea.selectionEnd - anArea.selectionStart);
text[2] = anArea.value.substr(anArea.selectionEnd);
var caretPos = anArea.selectionEnd + startTxt.length +
endTxt.length;
anArea.value = text[0] + startTxt + text[1] + endTxt +
text[2];
if (anArea.setSelectionRange) {
anArea.focus();
anArea.setSelectionRange(caretPos, caretPos);
}
}
else {
anArea.value += startTxt + aSel.text + endTxt;
}
}
function doTag(anArea,aTag) {
doStartEnd(anArea,'<'+aTag+'>','</'+aTag+'>');
}
function doTagAttrib(anArea,aTag,anAttrib,aValue) {
doStartEnd(anArea,'<'+aTag+'
'+anAttrib+'=\"'+aValue+'\">','</'+aTag+'>');
}
function storeCaret(text) {
if (text.createTextRange) text.caretPos =
document.selection.createRange().duplicate();
// save the state of the selection because clicking on the button
leaves the text area and
// destroys the select.
}
document.write('<A TITLE=\'Bold\'
onClick="javascript:doTag(text,\'b\');"><B>B</B></A> ')
document.write('<A TITLE=\'Italic\'
onClick="javascript:doTag(text,\'i\');"><i>I</i></A> ')
document.write('<A TITLE=\'Underline\'
onClick="javascript:doTag(text,\'u\');"><u>u</u></A> ')
document.write('<A TITLE=\'Blockquote\'
onClick="javascript:doTag(text,\'blockquote\');">""</A> ')
document.write(' <A TITLE=\'Link\'
onClick="javascript:doTagAttrib(text,\'a\',\'href\',prompt(\'Enter
url\',\'www.\'));">∞</A> ')
// End the hiding here. -->
</SCRIPT>
<BR><TEXTAREA NAME="text" ROWS="4" COLS="65" onselect="storeCaret(this);"
onclick="storeCaret(this);" onkeyup="storeCaret(this);"
onchange="storeCaret(this);">
</TEXTAREA>
2006\02\14@154806
by
Danny Sauer
|
James wrote regarding '[EE] IE textRange guru needed' on Tue, Feb 14 at 12:50:
> I hope that makes sense. Now, I have all that working in IE /except/ for the
> part about the position of the cursor. One is supposed to be able to move
> the thing with the .move("character",distance) method to a textRange object
> where distance is the negative or positive number of characters to move. And
> I have seen it work before, but for some.... amazingly frustrating...
> reason, it will not work here.
> if (document.selection) {
> anArea.focus();
> var aSel = ( anArea.caretPos ? anArea.caretPos :
> document.selection.createRange() );
> if (aSel.text.charAt(aSel.text.length-1)==' ')
> aSel.moveEnd('character',-1);
> aSel.text = startTxt + aSel.text + endTxt;
> anArea.createTextRange().move("character",-4);
> }
What the documentation doesn't note is that, if you create a new
range, the range is created at the beginning of the text area. So
when you create a new textRange in your textarea, the range is at at
0-0, so a negative number will move to to 0 (negative values don't
work) and a positive number will move from the start point of the
textbox - not the selection.
In order to get the cursor positioned, you want to move relative to
the selection (it'll be relative to the end of the seelction,
regardless of the direction the text was selected in), and then
reselect the text range. I'm not sure why that works, but it does (if
this wasn't IE and it's pile of quirks, I'd research it until I knew -
but it's probably "just the way it is" rather than for any good
reason). Use these two lines instead of your last line where you
create a new area, and it should work better.
aSel.move('character',-4)
aSel.select();
--Danny
2006\02\14@172930
by
James Newtons Massmind
> What the documentation doesn't note is that, if you create a
> new range, the range is created at the beginning of the text
> area. So when you create a new textRange in your textarea,
> the range is at at 0-0, so a negative number will move to to
> 0 (negative values don't
> work) and a positive number will move from the start point of
> the textbox - not the selection.
Err.. ok, that's right. My bad. But...
{Quote hidden}> In order to get the cursor positioned, you want to move
> relative to the selection (it'll be relative to the end of
> the seelction, regardless of the direction the text was
> selected in), and then reselect the text range. I'm not sure
> why that works, but it does (if this wasn't IE and it's pile
> of quirks, I'd research it until I knew - but it's probably
> "just the way it is" rather than for any good reason). Use
> these two lines instead of your last line where you create a
> new area, and it should work better.
>
> aSel.move('character',-4)
> aSel.select();
Nope, still does bzactly the same thing. Also tried...
..humm....
...hang on, I didn't have that aSel.select(); in there...
Well I'll be a monkeys... Whatever...
It was the missing .select() that was tripping me up. I guess you can move
the range as you please, but until you tell it to become the selection...
Well, yes, now that I read the docs over again, that is exactly what it
says...
Thanks! But...
Now I have another problem. While I was waiting for a reply here, I came up
with another solution that I like better... I think...
I added the following:
if (aSel.text=='') {
aSel.moveStart('character',-100000);
if (aSel.text.lastIndexOf(startTxt) > aSel.text.lastIndexOf(endTxt))
startTxt='';
else
endTxt='';
aSel.collapse(false);
}
So that if you are outside of a bold block, it adds only the <b> and if you
are inside the bold, it adds only the </b>. E.g. if you click the B you get
first <b> then you can type your text and when you click the B the second
time you get </b>
Which do you think is better?
I also added hotkeys: Ctrl+B for Bold, Ctrl+I for italic, etc...
---
James Newton: PICList webmaster/Admin
.....jamesnewtonKILLspam@spam@piclist.com 1-619-652-0593 phone
http://www.piclist.com/member/JMN-EFP-786
PIC/PICList FAQ: http://www.piclist.com
2006\02\14@211034
by
Danny Sauer
|
|
James wrote regarding 'RE: [EE] IE textRange guru needed' on Tue, Feb 14 at 16:32:
> Now I have another problem. While I was waiting for a reply here, I came up
> with another solution that I like better... I think...
[...]
> So that if you are outside of a bold block, it adds only the <b> and if you
> are inside the bold, it adds only the </b>. E.g. if you click the B you get
> first <b> then you can type your text and when you click the B the second
> time you get </b>
>
> Which do you think is better?
I'm not sure that I personally like one at the exclusion of the other.
I use WordPress to keep a journal of what I've done at work. Calling
it a blog just seems so horrible - I'm keeping notes so people will
know what I did and how to repeat it (or what not to repeat, I
suppose). It uses both behaviors - if text is selected, it wraps the
text with the appropriate tags and positions the cursor after the tags
(I like the positioning inside better, FWIW). If no text is selected
it inserts an open tag and changes the button so it says B* instead of
B, indicating that there's an open bold tag.
I actually think that might be better than detecting what's
appropriate based on where the user's typing. The global toggle shows
the user what htey last opened, and it's up to them to figure out if
theyre in the right place or not. If the toggle's still set when the
user hits submit, a </b> is automatically appended to the end of the
text box. That would be a little more complex to handle with the
current solution, as you'd have to search the text, wheras the toggle
method only requires checking the state of a variable. The toggle
method doesn't depend on browser differences, though, and is a quicker
lookup than a textual search of a potentially long string, so may be
better suited for a JavaScript interface. It also has the benefit of
allowing for a little more obvious user interface - bold is either
"on" or "off".
Both have potential to break an existing tag pair, though, so it might
be worthwhile to do a check before alowing the click - to see if
there's an open bold before the insertion point and, if so, if there's
also a matching close bold after that but before the insertion point.
--Danny
More... (looser matching)
- Last day of these posts
- In 2006
, 2007 only
- Today
- New search...
