Настройка поведения Contenteditable с помощью Javascript

В настоящее время в Firefox, когда я нажимаю клавишу возврата в абзаце contenteditable, он вставляет тег br, создает новый тег абзаца, а затем помещает тег br внутрь этого нового абзаца. Я хотел бы изменить поведение таким образом, чтобы

  • Shift+enter = тег br (это уже по умолчанию)
  • Enter дублирует текущий элемент, будь то p, li, h1.. и т. д., и удаляет все замыкающие или ведущие (спецификация W3C требует некоторых событий, которые я мог бы использовать, но я совсем не уверен, как их реализовать.
  • Backspace в начале элемента объединит его с предыдущим элементом, если он существует.
  • Удалить в конце элемента объединит его со следующим родственным элементом, если он существует.
I have tried trapping keypress and checking for the return, delete, and backspace keys, but I can't seem to get the current caret position accurately or to prevent the default behavior if I am overriding it.

Я бы счел очень полезным, если бы кто-нибудь знал, как ..

Возможно, кто-то даже знает о пользовательском агенте (браузере), который уже ведет себя таким образом. Это приемлемо.


javascript jquery contenteditable jquery-events
person Daniel    schedule 18.04.2011    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Чтобы отредактировать редактируемое содержимое, я бы сделал следующее:

$("#editable").bind("keypress",function(e){
   if(e.keyCode==13 && e.shiftKey){ //enter && shift
      e.preventDefault(); //Prevent default browser behavior
      this.html(this.html+"<br>");
   }
});

Вы можете редактировать то, что находится внутри функции html. PS: я не помню, есть ли у jQuery shiftKey и keyCode в объекте события... если что-то пойдет не так, измените e на e.originalEvent.

Чтобы получить позицию каретки: В не-IE:

document.getSelection().anchorOffset
person JCOC611    schedule 18.04.2011
comment
Спасибо, это в основном то, что я пробовал, но с одним важным отличием. У меня e.preventDefault был последним вызовом в стеке, а вы поставили его первым. Когда ставишь последний, то безрезультатно. Не уверен, почему, но это так. Спасибо за ваш ответ, это возвращает меня в бизнес. У меня все еще есть некоторые проблемы, но я попробую их еще раз. - person Daniel; 18.04.2011
comment
Это не сработает, если курсор не стоит в конце редактируемого текста. - person Tim Down; 19.04.2011
comment
Да, я знаю, вам нужно использовать что-то вроде этого: this.html(this.html().substring(anchorOffset)+"<br>"+this.html().substring(0,anchorOffset)) - person JCOC611; 19.04.2011
comment
@ JCOC611: Это будет работать, только если редактируемый элемент содержит один текстовый узел, чего не будет после вставки <br> в его середину. Для общего случая это не будет жизнеспособным. - person Tim Down; 19.04.2011
comment
Это вполне вполне возможно, но это было бы довольно сложно, потребовалось бы тонны кода... - person JCOC611; 19.04.2011