События в opera с contentEditable
Нужно подсчитать количество символов в блоке с contentEditable. Я использовал события Oninput и onpropertychange, но ни одно из них не работает в opera на блоках с атрибутом contentEditable.
Как обойти? |
а что свойства .textContent, .innerText не работают чтоль?
|
События oninput и Onpropertychange не работают.
Я ловлю именно эти события, т.к. нужно еще убрать теги и другие ненужные символы. Ко всему прочему, contentEditable не имеет, насколько я знаю, максимальной длины символом, поэтому приходится еще и принудительно урезать строку. Т.е. заменять полностью текст, и при событии скажем keypress каретка уходит |
Решил попробовать выровнять все это дело с помощью объекта range, но никак не пойму почему так работает
console.dir(document.createRange()); а так не работате console.dir(document.getElementsByClassName("my_cl ass")[0].createRange()); Подскажите, пожалуйста. Хотя document.getElementsByClassName("my_class")[0], существует |
Цитата:
у элементов нет метода createRange, что бы юзать его для конкретного элемента нужно явно его указать. Методы объекта Range почти все принимают в качетсве первого аргумента ссылку на элемент: http://www.w3.org/TR/DOM-Level-2-Tra...ange-Interface |
Я здесь читаю, http://learn.javascript.ru/vydelenie...роме-ie-9, c английским плохо у меня, а как переводит translate.google, так лучше и вовсе не читать.
Объясните, пожалуйста, что значит указать явно. |
var node = document.getElementsByClassName("my_cl ass")[0];
var range = document.createRange();
range.setStart(node, 10);
Цитата:
|
ну вот пример, как бы рабочий должен быть
var root = document.getElementById('ex2'); // Найдем контейнеры граничных точек (в данном случае тестовые) var start = root.getElementsByTagName('h2')[0].firstChild; var end = root.getElementsByTagName('p')[0].firstChild; if (root.createRange) { // Создаем Range var rng = root.createRange(); Но вот не рабочий пример с этой страницы var root = document.getElementById('post_message_244584'); var rng = root.createRange(); TypeError: Object #<HTMLDivElement> has no method 'createRange' В чем разница? Причем в ВАшем примере корневой контейнер window.document А в примере по ссылке div |
да не нужно создавать объект у элемента.. Ошибка вам что совсем ни о чем не говорит? нету этого метода у элементов, это метод есть только у документа.
Цитата:
var root = document.getElementById('ex2'); на вот такую: var root = document; |
Да, спасибо за ответ. Теперь ясно.
И подскажите, почему еще так не работает var rng = document.createRange(); rng.setStart(document.getElementsByClassName("my_c lass")[8],0); rng.setEnd(document.getElementsByClassName("my_cla ss")[8],5); |
вот так должен выглядеть тот пример:
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, но в целом вот такой пример нормально работает в хром
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, и получается два одинаковых блока. Как-то можно это обойти?
Т.е. если пользователь берет текст скажем с блокнота, то текст нормально вставляется, а если со страницы браузера, то во-первых текст не вставляется, во-вторых сам блок разделяется. |
в firefox
если установить атрибут contentEditable + position: absolute; То можно не только править текст, но и передвигать и изменять размеры блока. Подскажите, пожалуйста. Как-то можно посредством JavaScript отключить эти функции и соответствующие им инструменты |
Цитата:
передвигать и изменять размеры -изменить свойство position: absolute как это сделать гуглится легко. Отменить поведение браузера? -навряд ли |
Цитата:
resize: none; |
| Часовой пояс GMT +3, время: 11:55. |