javascript 不允许在 textarea 中出现新行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4959501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Don't allow new lines in textarea
提问by kieran
Using jQuery how can I not allow new lines to be inserted (by pressing enter or copying in text) - In semi-pseudo code...
使用 jQuery 如何不允许插入新行（通过按 Enter 键或在文本中复制） - 在半伪代码中...
$('textarea').keydown(function(){
$(this).remove_new_lines();
});
Thanks!
谢谢！
EDIT:
编辑：
Would it be as crude as the following or is there a better way?
它会像以下一样粗糙还是有更好的方法？
function removeNL(s){
return s.replace(/[\n\r\t]/g,);
}
$('textarea').keydown(function(){
$(this).val(removeNL($(this).val));
});
回答by coreyward
There are two methods to do this: check each character as it is input and return false if you don't want it to show up, or on each change/keyup you can check the entire contents. While the former is more performant, it won't work in situations where the user pastes content in that includes unwanted characters. For that reason, I recommend the latter approach, something like this (which will disallow all vertical whitespace):
有两种方法可以做到这一点：在输入时检查每个字符，如果不想显示则返回 false，或者在每次更改/按键时检查整个内容。虽然前者的性能更高，但在用户粘贴包含不需要的字符的内容的情况下，它不起作用。出于这个原因，我推荐后一种方法，就像这样（这将禁止所有垂直空白）：
With jQuery:
使用 jQuery：
$('textarea').on('keyup', function(){
$(this).val($(this).val().replace(/[\r\n\v]+/g, ''));
});
Or using plain JavaScript (ES2015/ES6):
或者使用纯 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)
})
Another approach is to wait until the focus leaves the textarea, then apply the transformation. This avoids janky behavior on operating systems using synthetic, conditionally active keyboard controls. The user will see newlines until they leave the field, though, so be aware. To do this, just change the above event listener to listen for blurrather than keyup.
另一种方法是等到焦点离开 textarea，然后应用转换。这避免了使用合成的、有条件的活动键盘控件的操作系统上的卡顿行为。但是，用户在离开该字段之前会看到换行符，因此请注意。为此，只需将上述事件侦听器更改为侦听blur而不是keyup.
If you're using React, you have it made because it avoids issues with mobile browsers while letting you manage the value as it changes using controlled components:
如果您正在使用 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} />;
}
}
回答by Fatih Acet
you can check keyCode, if it is equal to 13 simply return false
您可以检查keyCode，如果它等于13，则返回false
$('#TEXTAREA').keypress(function(e){
if (e.keyCode == 13) return false
})
回答by David Houde
$('textarea').keydown(function(e){
var s = $('textarea').val();
while (s.indexOf("\n") > -1)
s = s.replace("\n","");
$('textarea').val(s);
});
