Сделайте <br>вместо <div></div>, нажав Enter на предмете - PullRequest
Новая
       65

Сделайте <br>вместо <div></div>, нажав Enter на предмете

14 голосов
/ 20 июня 2010

Я написал немного кода в свой обработчик событий клавиатуры, чтобы вставить <br> в ответ на нажатие клавиши Enter: 

event.preventDefault();
document.execCommand('InsertHTML', true, '<br>');

Это работает, только если курсор находится между двумя буквами, если на его конце мне нужно два <br> -элемента. Могу ли я определить, нахожусь ли я в конце строки? Или какая-то другая рабочая идея для проблемы Enter?

Я также пытался перехватить обычное событие клавиши (без нажатой клавиши Ctrl) и создать событие клавиатуры с JS, когда клавиша Enter нажимается вместе с Ctrl. Но это не сработает ...

Это должно работать только в Webkit / Safari ...

Ответы [ 2 ]

24 голосов
/ 17 ноября 2010

Чтобы решить вашу проблему, всегда сохраняйте элемент br как последний элемент вашего contenteditable div. Это обеспечит предсказуемое поведение при внедрении элемента br по сравнению с браузером по умолчанию для вставки элементов div. Вы можете проверить lastChild на keyup и mouseup, чтобы убедиться, что это элемент br. Предполагая, что у вас есть документ вроде: 

<div id="editable" contenteditable="true"></div>

Вы можете использовать следующий JavaScript (w / jQuery 1.4+), чтобы сохранить элемент br в качестве последнего элемента и добавить элемент br вместо div div: 

$(function(){

  $("#editable")

    // make sure br is always the lastChild of contenteditable
    .live("keyup mouseup", function(){
      if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
        this.appendChild(document.createChild("br"));
      }
    })

    // use br instead of div div
    .live("keypress", function(e){
      if (e.which == 13) {
        if (window.getSelection) {
          var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement("br");
          range.deleteContents();
          range.insertNode(br);
          range.setStartAfter(br);
          range.setEndAfter(br);
          range.collapse(false);
          selection.removeAllRanges();
          selection.addRange(range);
          return false;
        }
      }
    });

});

Протестировано на Apple OS X с Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5). Попробуйте использовать ierange , чтобы заставить это работать в Windows Internet Explorer.

0 голосов
/ 31 мая 2011

Я бы привязал функцию к событию keyup для удаления и изменил бы на
, используя regEx. Поэтому, даже если он создает странную разметку, он будет исправлен.

Использование jQuery: 

$('.myEditable').keyup(function(){
   var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
   $(this).text(sanitazed);
});
...