javascript - 不允许在 textarea 中换行

使用 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));
});

最佳答案

有两种方法可以做到这一点:在输入时检查每个字符,如果您不希望它显示,则返回 false,或者在每次更改/keyup 时检查全部内容。虽然前者的性能更高,但在用户粘贴包含不需要字符的内容的情况下它不起作用。出于这个原因,我推荐后一种方法,像这样(这将不允许所有垂直空格):

使用 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} />;
  }
}

https://stackoverflow.com/questions/4959501/

相关文章:

string - 在包含花括号的字符串上使用 -f 运算符

.net - 文化不可变对象(immutable对象) ToString()

python - 在列表上迭代格式字符串

r - 用 R 定义 Excel 的列宽

sql - 总是在 SQL 中显示小数位?

vim - 如何在 Vim 中插入对齐文本列所需的可变数量的空格?

netbeans - 更改netbeans中自动突出显示的变量名的突出显示颜色?

c# - 我应该使用 ToString() 还是 GetDateTimeFormats() 来格式化

perl - 在 Perl 中处理非常大的数字时,如何禁用科学记数法?

intellij-idea - 如何阻止 IntelliJ IDEA 从 .properties 文