Enter не работает должным образом в Firefox с contenteditable - PullRequest
0 голосов
/ 03 октября 2019

Я нашел этот скрипт здесь, и он, кажется, немного помогает «багам» с contenteditable и переносами строк, но все еще происходит что-то напуганное.

var input = $( '#input' )[0];

$( input ).keypress( function ( e ) {
    var sel, node, offset, text, textBefore, textAfter, range;
   
    // the Selection object
    sel = window.getSelection();
    
    // the node that contains the caret
    node = sel.anchorNode; 

    // if ENTER was pressed while the caret was inside the input field
    if ( node.parentNode === input && e.keyCode === 13 ) {
        
        // prevent the browsers from inserting <div>, <p>, or <br> on their own
        e.preventDefault();

        // the caret position inside the node
        offset = sel.anchorOffset;        

        // insert a '\n' character at that position
        text = node.textContent;
        textBefore = text.slice( 0, offset );
        textAfter = text.slice( offset ) || ' ';
        node.textContent = textBefore + '\n' + textAfter;

        // position the caret after that new-line character
        range = document.createRange();
        range.setStart( node, offset + 1 );
        range.setEnd( node, offset + 1 );
        
        // update the selection
        sel.removeAllRanges();
        sel.addRange( range );
    }
});
#input {
    border: 3px solid #07c;
    width: 300px; 
    height: 200px;
    white-space: pre;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contentEditable id="input"></div>

Просто пример, чтобы попытаться воссоздать то, о чем я говорю:

Тест 1: В Firefox (яна Mac), попробуйте написать 'test' в div и нажмите enter (пробел добавляется в конце, но оставьте курсор, где он есть). Напишите 'test' снова в новой строке. Установите курсор в начале элемента div и напишите «test», а затем введите «enter». Установите каретку в конце div после пробела и нажмите ввод. НЕТ разрыва строки.

Тест 2: Запишите test, нажмите cmd + a (ctrl + a на ПК), чтобы выбрать все, затем нажмите клавишу со стрелкой вправо, а затем введите. НЕТ разрыва строки. Это похоже на то, что сценарий теряет след каретки, если вы перемещаете его любым другим способом, кроме символа за символом.

Тест 3: нажмите клавишу ввода 3 раза подряд без какого-либо другого содержимого, и вы получите сообщение об ошибке

Идеи

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...