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

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

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

<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. Но, т.е. Не поддерживает "inserttext". Будет ли способ вставить текст с тем, чтобы пользователь мог отменить его?

Ответы

Ответ 1

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

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

http://jsfiddle.net/E7sBD/2

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

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

Ответ 2

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

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

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