PDA

View Full Version : [Gecko] Replace selection


DefKev
10-13-2004, 06:45 PM
This is what i wrote, so far:


<html>

<head>
<script type="text/javascript">

function ReplaceSelection() {

if (window.getSelection) Selection = window.getSelection()
else Selection = document.selection.createRange();

if (Selection == 0) {
alert('No selection made !\nYou have to select something before using this button.');
return; }
else if (Selection.text == 0) {
alert('No selection made !\nYou have to select something before using this button.');
return; }

if (window.getSelection) Replace = prompt('Replace "' + Selection + '" with:\n(leave blank to delete selection)','');
else Replace = prompt('Replace "' + Selection.text + '" with:\n(leave blank to delete selection)','');

if (Replace == null) Replace = Selection;
else if (Replace == null) Replace = Selection.text;

if (window.getSelection) Selection = Replace;
else Selection.text = Replace; }

</script>
</head>

<body>
<p>Text</p>
<p><input value="more Text"></p>
<p><textarea rows="5" cols="20">yet more Text</textarea></p>
<p><input type="button" value="Replace Selection" onclick="ReplaceSelection();"></p>
</body>

</html>


Backround:

Select some text an hit the button, typ in with what you wan't to replace the selection with and press OK - Selection gets replaced (if nothing was selected and you push the button anyway, an alert will pop-up).

Problem:

Works just fine in IE, but i have no idea (at all) how to get the function to replace the selection in gecko (mainly firefox).

I know the selectionStart/-End method but i only got i working inside an </input> and </textarea>, but not with the text inside the document.


Thanks for advice !

Kev

hemebond
10-14-2004, 12:08 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>46018</title>
</head>
<body>
<textarea>This is a paragraph of text. Wow, this is a sentence.</textarea>
<input type="button" value="show selection" onclick="show_selection()">
</body>
<script type="text/javascript">
function show_selection()
{
var txt = document.getElementsByTagName('textarea')[0];
alert(txt.value.substr(txt.selectionStart, (txt.selectionEnd - txt.selectionStart)));
}
</script>
</html>

DefKev
10-14-2004, 02:30 PM
Hm ... not really what im looking for.

Your code shows me the selection inside a </textarea>, but im looking for a way to replace the selection anywhere in the document with something else.

For exempale, in IE i can simply use the following function:

document.selection.createRange().text = 'New Text'

And i need it to do exactly the same in Firefox, i tryed it with the Gecko-Version of "document.selection.createRange()" witch is "window.getSelection" but this only gets the selection and dont replace it.

jkd
10-14-2004, 06:18 PM
window.getSelection().getRangeAt(0)

That returns a DOM2 Range representing the selection. From there, you can use the various DOM2 methods that Mozilla supports. See www.w3.org/DOM/DOMTR for DOM2 Range.

DefKev
10-14-2004, 07:58 PM
Thanks jkd for turning me in the right direction.

Not much difference between window.getSelection() and window.getSelection().getRangeAt(0) ;)

Anyway, i wasn't able to get it done with creating a new range because the node always get's added to the beginning of the range, which is really annoying.

Thx again

jkd
10-14-2004, 09:45 PM
Big difference actually.


function insertNodeIntoSelection(node) {
var range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(node);
}


Pass that function say:

var el = document.createElement("div");
el.appendChild(document.createTextNode("Hello World"))

insertNodeIntoSelection(el);

DefKev
10-14-2004, 11:30 PM
Merge both code together and u get a working example !

You forgot to creat the 'node' in your code, with the function you posted below,
but the 'insertNodeIntoSelection(el);' makes absolutly no sense :D ...


Anyway, i allready got it done !

jkd
10-15-2004, 06:33 AM
Merge both code together and u get a working example !

You forgot to creat the 'node' in your code, with the function you posted below,
but the 'insertNodeIntoSelection(el);' makes absolutly no sense :D ...


Anyway, i allready got it done !


Uhh, see the example I posted right after it?

DefKev
10-15-2004, 10:32 AM
Ehh, jep :rolleyes: