contenteditable div получает позицию курсора

Question

Я нашел фрагмент кода, который отлично работает, кроме случаев, когда есть разрыв строки. Нажатие на ввод создает элемент HTML, и функция дает неправильный результат. Кто-нибудь с решением этой проблемы?

До сих пор я использовал следующий скрипт: http://niichavo.wordpress.com/2009/01/06/contenteditable-div-cursor-position/

Answer 1

Проблема, с которой вы сталкиваетесь, связана с различиями в браузерах.Например, IE добавит теги <p></p>, когда вы нажмете Enter, а затем нажмите <br/>, когда нажмете Shift-Enter.Chrome реализует <div>...</div> вокруг содержимого при нажатии Enter и <br/> при нажатии Shift-Enter.

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

Вот код, который я использовал, чтобы проверить это.

<script type="text/javascript">
    $(function () {
        $('#ShowButton').click(function (e) {
            alert($('#CED').html());
        });
    });    
</script>

<canvas id="drawingSurface" class="canvasLayout">

</canvas>

<div id="CED" contenteditable="true">
    Text goes here
</div>

<input type="button" value="Show HTML" id="ShowButton" />