Как запретить перенос на новую строку в textarea?

Question

[Александр]

Имеется textarea для отправки сообщений. Логика работы примерно как в ВК (enter - отправка сообщения, shift+enter - перенос на новую строку). Сейчас при нажатии enter выполняется перенос на новую строку, затем - "отправка" сообщения. Как убрать перенос?
Пример: https://jsfiddle.net/p12ecqkv/

Answer 1

[Антон Спирин]

Используйте вместо textarea:
<div contenteditable="true"></div>

Обработка события:

function (event) {
  if (!event.shiftKey && event.which === 13) {
    event.preventDefault();
    // тут код для отправки сообщения
  }
}

Пример на Vue:

<div id="app">
   <div class="wrapper">
      <div class="text-box" contenteditable="true" v-on:keypress="handleKeypress($event)"></div>
   </div>
</div>

new Vue({
  el: '#app',
  methods: {
    handleKeypress: function(e) {
      if (!e.shiftKey && e.which === 13) {
        e.preventDefault();
       }
    }
  },
})

Comments

[Александр]

А можно на jsfiddle, пожалуйста, пример? (я немного не понял как это должно работать)

[Антон Спирин]

jhkhjkhkhjk, как это должно работать писать долго. Вот пример, как это должно выглядеть:
https://jsfiddle.net/rockon404/qd2pz02u/
Дальше сами.

[Александр]

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

[Антон Спирин]

jhkhjkhkhjk, https://jsfiddle.net/rockon404/1whnkc0j/
Все просто.

[Александр]

это jQuery, там да,все классно и return false работает и жизнь прекрасна.... На vue preventDefault на событии не делает ровным счетом ничего!

[Александр]

https://jsfiddle.net/3zxaygL5/

[Антон Спирин]

Александр, да что вы говорите https://jsfiddle.net/rockon404/wzd7nvvf/

Изучайте возможности инструмента с которым работаете и все у вас будет хорошо.

[Александр]

Антон Спирин, разница в событии keypress и keyup...А так оно и с textarea отлично работает... Спасибо большое, проблема решена!

[Антон Спирин]

Александр, да это не обязательно, но в большинстве мессенджеров это стандарт.