不要在textarea中允许换行

Question

使用jQuery我怎么能不允许插入新行(通过按Enter键或复制文本) - 在半伪代码中...

$('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)
})

另一种方法是等待焦点离开textarea,然后应用转换.这避免了使用合成的,有条件激活的键盘控件在操作系统上的笨拙行为.但是,用户在离开现场之前会看到换行符,所以请注意.要做到这一点,只需更改上面的事件监听器来监听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
})