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

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

7 голосов
/ 18 апреля 2011

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

  • Shift + enter = br tag (это уже значение по умолчанию)
  • Enter дублирует текущий элемент, будь то p, li, h1..etc, и удаляет любые конечные или ведущие (спецификация W3C требует некоторых событий, которые я мог бы использовать, но я совсем не уверен, как их реализовать.
  • Backspace в начале элемента объединит его с предшествующим братом, если он существует
  • Удаление в конце элемента объединит его со следующим родным братом, если он существует.

Я попытался перехватить нажатие клавиш и проверить наличие клавиш возврата, удаления и возврата, но не могу точно определить текущее положение каретки или предотвратить поведение по умолчанию, если я переопределяю его.

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

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

Спасибо

Daniel

1 Ответ

6 голосов
/ 18 апреля 2011

Чтобы отредактировать контентно-редактируемое поведение, я бы сделал это: 

$("#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.

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

document.getSelection().anchorOffset
...