Имитация комбинации “Shift + Enter” js

348
05 ноября 2017, 19:58

Отменил действие по умолчанию на комбанацию ctrl + z и нужно что-бы по этой комбинации делался перевод строки в поле для ввода. Я это делаю добавлением <br> но впечатление, что комбинация срабатывает не каждый раз и главное что нет перевода строки...каретка остаётся на той же строке...Как её перекинуть на строку ниже?)

Демо http://jsfiddle.net/p00oh4sf/6/

P.S. другими словами нужен результат который происходит при нажатии shift + enter. Может можно как-то при нажатии на ctrl + z сэмулировать нажатие shift + enter ...

Answer 1

Чтобы нормально функционировать, в contenteditable должен быть как минимум один перенос. Его можно добавить при первом нажатии, или сразу в DOM.

Для управления курсором, нужно использовать Selection API

var el = document.getElementById("editable"); 
 
el.addEventListener('keydown', e => { 
  if(e.which === 90 && e.ctrlKey) { 
    e.preventDefault(); 
    return false; 
  } 
}); 
el.addEventListener('keyup', e => { 
  if (e.which !== 90 || !e.ctrlKey) return; 
  var selection = window.getSelection(), 
    range = selection.getRangeAt(0), 
    br = document.createElement('br'); 
  range.deleteContents(); // удаляем, если что-то было выделено 
  range.insertNode(br); // вставляем перенос за текущим положением курсора 
  range.setStartAfter(br); // переносим курсор за перенос 
  range.setEndAfter(br); 
  range.collapse(false); 
  selection.removeAllRanges(); 
  selection.addRange(range);   
});
<div id=editable contenteditable> 123 <br/></div>

READ ALSO
Перебор массива в js, интересный трабл
javascript

Перебор массива в js, интересный трабл

Имеется массив вида:

 279
Плюсовать значение при событии
javascript

Плюсовать значение при событии

Есть javascript:

 239
изменение цветов по клику
javascript

изменение цветов по клику

 300
Как заменить forEach() на map()?
javascript

Как заменить forEach() на map()?

Помогите пожалуйста переписать кусочек кода:

 230