143754 - .setSelectionRange and document.selection evaluate to false

Status: VERIFIED DUPLICATE of bug 88049

(Core :: DOM: Core & HTML, enhancement)

Description

[Tomasz Szkudlarek]

From Bugzilla Helper:
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)
BuildID:    2002041711

I don't know what's wrong with JS Engine from Mozilla, but i would like to have 
same possibilities as from IE. Look at this form from my site, and use buttons.

Reproducible: Always
Steps to Reproduce:
1. Just use the buttons in form.

Comment 1

[Phil Schwartau]

Reassigning to DOM Events. 

This is not a JavaScript Engine issue. JavaScript Engine deals with the
abstract JavaScript programming language. Specifically, the low-level 
objects such as String(), Number(), and Date(). The JS Engine is not itself 
aware of browser or DOM objects like window, document, sockets, etc.

Comment 2

[Phil Schwartau]

Tomasz: when you say the buttons don't work, you mean the
mouseovers, right? When I mouseover the buttons, I see this
error in  Tools > Web Development > JavaScript Console:


         Error: window.event has no properties
         Source File: http://qdlaty.ikom.pl/forum/forms.js
         Line: 10


Here are the functions that are using window.event:

function mouseover(){
  if(window.event.toElement.tagName == "INPUT" ||
     window.event.toElement.tagName == "TEXTAREA" ||
     window.event.toElement.tagName == "SELECT"){
    window.event.toElement.style.background = "#cbcbcb";
  };
};

function mouseout(){
  if(window.event.fromElement.tagName == "INPUT" ||
     window.event.fromElement.tagName == "TEXTAREA" ||
     window.event.fromElement.tagName == "SELECT"){
    window.event.fromElement.style.background = "#d8d8d8";
  };
};

Comment 3

[Phil Schwartau]

window.event is IE-only syntax. In Mozilla, the event object is passed 
automatically to your event handler function. Here is a sample event handler 
designed to work in NN4.7, IE4, and Mozilla/N6:


function mouseOver(e) {
  switch(navigator.family) {
    case 'nn4':
        alert("mouse X position is.." + e.pageX);
        break;
    case 'ie4':
        alert("mouse X position is.." + window.event.clientX);
        break;
    case 'gecko':
        alert("mouse X position is.." + e.pageX);
        break;
  }
}


Have to mark this bug invalid, because you're using IE-only syntax.
Note: the above example comes from

http://devedge.netscape.com/evangelism/docs/articles/updating-dhtml-web-pages/
(See "Assigning an event handler to DIV element (onmouseover event)" 

Comment 4

[Phil Schwartau]

Tomasz reports:
------------------------------------------------------------------------

eh, my fault

I meant these functions:

function insertAtCaret (input, text) {
   if (input.setSelectionRange) {
     var selectionStart = input.selectionStart;
     var selectionEnd = input.selectionEnd;
     input.value = input.value.substring(0, selectionStart)
                   + text + input.value.substring(selectionEnd);
     input.setSelectionRange(selectionStart + text.length, 
selectionStart + text.length);
     input.focus();
   }
   else if (document.selection) {
     var range = document.selection.createRange();
     if (range.parentElement() == input)
       range.text = text;
       input.focus();
   }
}

function insertAtSelection (input, beforetext, aftertext) {
   if (input.setSelectionRange) {
     var selectionStart = input.selectionStart;
     var selectionEnd = input.selectionEnd;
     input.value = input.value.substring(0, selectionStart)
                   + beforetext + input.value.substring(selectionStart, 
selectionEnd + 1)
                   + aftertext + input.value.substring(selectionEnd + 1);
     input.setSelectionRange(selectionStart + beforetext.length + 
aftertext.length, 
selectionStart + beforetext.length + aftertext.length);
     input.focus();
   }
   else if (document.selection) {
     var range = document.selection.createRange();
     if (range.parentElement() == input)
       range.text = beforetext + range.text + aftertext;
       input.focus();
   }
}



I use them to insert some text into textarea inside selection focus.
The best way to see what I meant is:

1. Load IE
2. open http://qdlaty.ikom.pl/forum/dodaj_watek.php?id=272855
3. Then Write some text into textarea (TreϾ)
4. Select a part of this text, and launch for example "B" key.


I know, it's not a bug, but this is very useful for me.
It allows to create very flexible www editors.
-----------------------------------------------------------------------

Comment 5

[Phil Schwartau]

Reopening bug for consideration. I saved the URL locally and 
commented out this part of the JS file:

/*
if (roll && navigator.userAgent.indexOf("Mozilla", 0) != -1)
{
  document.onmouseover = mouseover;
  document.onmouseout = mouseout;
};
*/


This prevents the above |window.event| errors from occurring. 
I then tried the steps Tomasz gave above. I typed "aaa" into the
'Tresc' textarea, highlighted the middle "a", and hit the "B" button.

In IE6, the text was changed to "a[b]a[/b]a".

In Mozilla trunk 20020508xx, nothing happened. I debugged the
above function in Tools > Web Development > JavaScript Debugger:


function insertAtSelection (input, beforetext, aftertext)
   if (input.setSelectionRange) {

          etc.
   }
   else if (document.selection) {

          etc.
   }
}


I found that in Mozilla, both |input.setSelectionRange| and
|document.selection| evaluated to false for this <textarea> element.
Here is part of my debugging session:


-----------------------------------------------------------------------------
Stopped for breakpoint.

function insertAtSelection(input=HTMLTextAreaElement:{0},                            
                           beforetext=string:"[b]", aftertext=string:"[/b]")

in <file:/C:/WINNT/Profiles/pschwartau/Desktop/143754_files/forms.js> line 48

input
[HTMLTextAreaElement] [class: HTMLTextAreaElement] {0}

input.setSelectionRange
[void] void

document.selection
[void] void
-----------------------------------------------------------------------------

Comment 6

[Phil Schwartau]

Reassigning to DOM Level 0. Why do both |input.setSelectionRange| and
|document.selection| evaluate to false for |input| a <textarea> element? 

I found this explanation on the Web:
http://www.faqts.com/knowledge_base/view.phtml/aid/13562/fid/128

> "Unfortunately it seems that textarea elements do not have the method 
> setSelectionRange or the properties selectionStart/selectionEnd in NN6 
> so that it is currently not possible to manipulate the selection or 
> caret in a textarea element."


Is that true? And if so, why does |document.selection| also
evaluate to false?

Comment 7

[Johnny Stenback (:jst)]

There is no document.selection property, but there is a document.getSelection()
method. This is however a dup of bug 88049.

*** This bug has been marked as a duplicate of 88049 ***

Comment 8

[Phil Schwartau]

Marking Verified Duplicate. 

|document.selection| is IE-only. If we try this javascript: URL

           javascript: alert('selection' in document)

we get:            IE6 -------->  'true'
                   Moz -------->  'false'


Tomasz, thank you for this report. You have been cc'ed on bug 88049
so that you can follow its progress -