Avoiding line breaks in text areas

Question

I have a normal textarea

<textarea placeholder=" Digite aqui" class="form-control"></textarea>

I wanted that when the user pressed enter, it did not break line and already send the content.

I could do that with a input? yes But the problem is that I want you to have a line break only when the user ends up typing too much (get to the end of that line).

Does anyone know if there’s a way?

Answer 1

As you are using Bootstrap, the example below uses jQuery.

var ENTER_KEY = 13;

$('textarea').on('keypress', function(event) {
  var char = event.which || event.keyCode;
  if (char == ENTER_KEY) {
    event.preventDefault();
    $(this).parent('form').submit();
  }
})

I didn’t put as snippet because Stackoverflow blocks, but you can see it working on Jsfiddle.

If you want to keep the line break when the user presses SHIFT + ENTER can make the check with mouveEvent#shiftKey() returning true if the shift is pressed:

var ENTER_KEY = 13;

$('textarea').on('keypress', function(event){
    var char = event.which || event.keyCode;

    if(char == ENTER_KEY){
       event.preventDefault();
       if(event.shiftKey){
           $(this).val($(this).val() + '\n'); // shift + enter = Quebra linha
           return;
       }
       $(this).parent('form').submit(); // somente o Enter = Envia o form
    }
});

Online example on Jsfiddle.

API:

• parent()
• submit()
• on()
• event#preventDefault()

Answer 2

You can do this using javascript, just manipulate the event onkeypress of textarea, check if the key pressed is the enter and perform form Submit or anything else you wish.

document.getElementById('meuTextarea')
  .addEventListener('keypress', function(e) {
    var key = e.which || e.keyCode;
    if (key === 13) {
      e.preventDefault(); //Evitar a quebra de linha (remove o comportamento padrão)
      document.getElementById("myForm").submit(); //Submeter o formulário
    }
  });

Answer 3

Follow another option in jquery https://jsfiddle.net/PauloKlixto/sc9z66hh/embedded/result/

$(document).ready(function(){
  $( "#teste" ).keypress(function() {
   if(event.keyCode == 13){
     $( "#myform" ).submit();
   }
  });
});