вот так должен выглядеть тот пример:

function domRangeCreate() {
  // Найдем корневой контейнер
  var root = document.getElementById('ex2');
  // Найдем контейнеры граничных точек (в данном случае тестовые)
  var start = root.getElementsByTagName('h2')[0].firstChild;
  var end = root.getElementsByTagName('p')[0].firstChild;
  if (document.createRange) {
    // Создаем Range
    var rng = document.createRange();
    // Задаем верхнюю граничную точку, передав контейнер и смещение
    rng.setStart( start, 3 );
    // Аналогично для нижней границы
    rng.setEnd( end, 10 );
    // Теперь мы можем вернуть текст, который содержится в полученной области
    return rng.toString();
  } else {
    return 'Вероятно, у вас IE<9, смотрите реализацию TextRange ниже';
  }
}

а что вы конкретно хотите сделать?

Конкретно я хочу каретку вернуть на то место, где она печатается.

Ну и заодно разбираюсь с Range. Я так понял в setStart и setEnd нужно передать еще не существующий элемент, если планируется его создать.

Ну и вернуть как-то не выходит ее на место. Пробую так

var txt = window.getSelection().anchorOffset;
var rng = document.createRange(); 
rng.setStart(document.getElementsByClassName("my_class")[8].firstChild,txt );
rng.setEnd(document.getElementsByClassName("my_class")[8].firstChild,txt ); 
var spn = document.createElement("span");
rng.surroundContents(spn);

для этого вам нужно использовать объект Selection

нужно его создать и вставить в DOM и потом передать ссылку на него.

Спасибо. Сейчас попробую через selection, но в целом вот такой пример нормально работает в хром

var rng = document.createRange(); 
rng.setStart(this.firstChild,3);
rng.setEnd(this.firstChild,3); 
rng.surroundContents(document.createElement("span"));

Каретка всегда висит на 3 позиции, а в опере не работает.

Правда у меня в хром событие oninput а в опере onkeypress.

Что-то я так и не понял, как можно через selection установить выделение. Пример по ссылке выше, показывает как выделить тег span, а мне нужно вернуть на определенную позиции по количеству символов курсор.

В общем я так понял, задачу мою таким путем решить не получится, и в первую очередь потому, что опера видимо не определяет на какой позиции находится каретка.

Поэтому решил сделать по другому, но использовать несколько событий.

В связи с этим возник вопрос, как можно указать несколько событий.

И подскажите, пожалуйста, как мне передать аргумент, скажем так

function fun(i){alert(i);}
document.getElementsByClassName("my_class")[0].onkeypress = fun(5);

или через attachEvent

Какие вообще есть способы?

И подскажите, пожалуйста, как определить какое именно событие произошло. Скажем я вызываю одну функцию на событие onkeypress и оninput, но в ней хочу разделить условия в зависимости от вызванного события.

Также заметил, что при вставке в файрфокс html текста, текст, как таковой не вставляется, зато разделяется блок с contentEditable, и получается два одинаковых блока. Как-то можно это обойти?
Т.е. если пользователь берет текст скажем с блокнота, то текст нормально вставляется, а если со страницы браузера, то во-первых текст не вставляется, во-вторых сам блок разделяется.