альтернатива internet explorer для документа.execCommand ("insertText",...), для вставки текста, который может быть отменен/переделан пользователем

когда пользователь редактирует contenteditable div и нажмите некоторые клавиши, я хотел бы переопределить поведение по умолчанию. Например, я хочу вставить обычный разрыв строки, когда пользователь нажимает ENTER. Я делаю это, используя document.execCommand("insertText",...)

Это единственный способ я нашел до сих пор, чтобы сделать это действие undoable и перевыполнимой пользователем.

<div id="editor" contenteditable="true" style="white-space:pre-wrap">
Some text....
</div>

<script>
$("#editor").keydown(function(evt){
    console.log(evt.keyCode);
    if(evt.keyCode==13){
        document.execCommand("insertText",false,"n");
        evt.preventDefault();
        evt.stopPropagation();
    }
}
</script>

этот код хорошо работает в chrome и firefox. Но ie не поддерживает "inserttext". Есть ли способ ... вставьте текст с ie, так что пользователь может отменить это?

2 ответов


IE 11 имеет новый ms-beginUndoUnit и ms-endUndoUnit команды.

Я попытался и не смог создать рабочее решение для IE 11, используя их. Вставка разрыва строки затруднена диапазонами и выборками DOM; вы можете сделать это более легко в IE, используя его наследие document.selection и TextRange объекты, но, к сожалению, IE 11 удалены document.selection (но не TextRange, как ни странно), что затрудняет это. После кодирования неприятного обходного пути для создания TextRange из выбора, undo все равно не работал. Вот что я сделал:--9-->

http://jsfiddle.net/E7sBD/2

Я решил еще раз использовать диапазон DOM и объекты выбора. Код вставки разрыва строки является иллюстративным и не должен использоваться для чего-либо серьезного, потому что он включает в себя добавление неразрывного пространства, чтобы дать каретку куда-то идти (пытаясь разместить его сразу после <br> не работает). Отмена удаляет вставленное содержимое но, к сожалению, не перемещает каретку.

http://jsfiddle.net/E7sBD/4/


вы всегда можете пойти более простым и стабильным способом поймать событие изменения на входном div и изменить последний символ из входной строки по своему вкусу.

http://api.jquery.com/change придумано я думаю для этой цели:)

измените своего ангела, и вы увидите совершенно новый мир: 3