Inline autocorrect with contenteditable

Возможно ли сделать что-то вроде функции автокоррекции в iOS для контентных полей? По мере того, как пользователь вводит, орфография будет проверена (у меня уже есть эта часть), но тогда мне нужен способ исправить это слово. Я мог бы заменить весь html контента, доступного для контента, но тогда позиция курсора теряется, и есть вероятность, что пользователь попытается напечатать, прежде чем html будет перезаписан. В идеале это просто заменит символы x перед курсором пользователя. Это возможно?Inline autocorrect with contenteditable

источник

2015-03-15 firefoxuser_1

это возможно, но гораздо сложнее, чем вы могли бы подумать. подумайте, что 'document.getSelection(). anchorNode' покажет вам только тот узел, где происходит типизация. вам нужно заменить текст всего узла, а затем восстановить курсор в том месте, где он был раньше, и будет отличаться от индекса, если изменяется длина исправленного текста. покажите нам какой-то код, и мы сможем помочь ему работать. – dandavis

@dandavis У меня нет кода - я понятия не имею, как это сделать, и до сих пор я ничего не могу найти. Даже описание того, как восстановить курсор вместе с anchorNode, будет очень оценено. –

притвориться, что вы печатали и наводили курсор перед «и», например «textt | and», а затем нажмите кнопку в этом примере: http://jsfiddle.net/p0dxdnub/ – dandavis

ядро замены на узле-бытие-набрано в функции может быть приведено в действии этой функции:

function runRep(from, to) { 
    var sel = document.getSelection(), 
     nd = sel.anchorNode, 
     text = nd.textContent.slice(0, sel.focusOffset), 
     newText = text.replace(from, to), 
     wholeNew = nd.textContent.replace(text, newText), 
     range = document.createRange(); 

    nd.textContent = wholeNew; 
    range.setStart(nd, newText.length); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    nd.parentNode.focus() 

}

использования: runRep("helo", "hello");, который заменит неправильно пишутся «привет» слева от курсора в текущем узле. вам нужно быть осторожным в отношении подстрочных совпадений. Обновление функции replace() для использования RegExp скорее всего позволит более точно настроить таргетинг (например, только целые слова, игнорируя cAsE и т. Д.), Но это будет работать как есть, а обновление RegExp не изменит остальную часть кода.

не показано, как один на самом деле обнаруживает неправильно написанное слово, что это уже другая тема ...

обязательно скрипку: http://jsfiddle.net/p0dxdnub/

источник

2015-03-15 23:50:46 dandavis

Inline autocorrect with contenteditable

ответ

Смежные вопросы