Не разрешать новые строки в textarea

Question

Используя jQuery, как я могу запретить вставку новых строк (нажав клавишу ввода или копирование в тексте) - В полупсевдокоде ...

$('textarea').keydown(function(){
 $(this).remove_new_lines();
});

Спасибо!

РЕДАКТИРОВАТЬ:

Это будет так же грубо, как в следующем или есть лучший способ?

function removeNL(s){ 
  return s.replace(/[\n\r\t]/g,); 
}

$('textarea').keydown(function(){
 $(this).val(removeNL($(this).val));
});

Answer 1

Есть два способа сделать это: проверить каждый символ в том виде, в котором он введен, и вернуть false, если вы не хотите, чтобы он отображался, или при каждом изменении / вводе ключа вы можете проверить все содержимое.Хотя первый более производительный, он не будет работать в ситуациях, когда пользователь вставляет контент, в который входят нежелательные символы.По этой причине я рекомендую последний подход, примерно такой (который запрещает все вертикальные пробелы):

с jQuery:

$('textarea').on('keyup', function(){
  $(this).val($(this).val().replace(/[\r\n\v]+/g, ''));
});

или с использованием простого JavaScript (ES2015 / ES6):

constrainInput = (event) => { 
  event.target.value = event.target.value.replace(/[\r\n\v]+/g, '')
}

document.querySelectorAll('textarea').forEach(el => {
  el.addEventListener('keyup', constrainInput)
})

Другой подход состоит в том, чтобы подождать, пока фокус не покинет текстовое поле, а затем применить преобразование.Это позволяет избежать рискованного поведения в операционных системах, использующих синтетические, условно активные элементы управления клавиатурой.Пользователь будет видеть новые строки, пока они не покинут поле, так что будьте внимательны.Чтобы сделать это, просто измените прослушиватель событий выше, чтобы прослушивать blur вместо keyup.

Если вы используете React, вы сделали это, потому что он позволяет избежать проблем с мобильными браузерами, позволяя вам управлятьзначение изменяется при использовании контролируемых компонентов:

class TextArea extends React.PureComponent {
  state = {
    value: ""
  };

  handleChange = event => {
    const value = event.target.value.replace(/[\r\n\v]+/g, "");
    this.setState({ value });
  };

  render() {
    return <textarea onChange={this.handleChange} value={this.state.value} />;
  }
}

Answer 2

вы можете проверить keyCode, если он равен 13, просто вернуть false

$('#TEXTAREA').keypress(function(e){
   if (e.keyCode == 13) return false
})

Answer 3

$('textarea').keydown(function(e){
 var s = $('textarea').val();
 while (s.indexOf("\n") > -1)
  s = s.replace("\n","");
 $('textarea').val(s);
});