按下 ENTER 时禁用 Textarea 中的新行答案

【问题标题】：Disable New Line in Textarea when Pressed ENTER按下 ENTER 时禁用 Textarea 中的新行
【发布时间】：2013-09-17 17:29:10
【问题描述】：

每当有人在textarea 中按 enter 时，我都会调用一个函数。现在我想在按下 enter 时禁用 new line 或 break。

所以new line 应该在按下 shift+enter 时工作。在这种情况下，函数不应被调用。

这里是 jsfiddle 演示： http://jsfiddle.net/bxAe2/14/

【问题讨论】：

标签： textarea newline enter shift

【解决方案1】：

试试这个

$("textarea").keydown(function(e){
// Enter was pressed without shift key
if (e.keyCode == 13 && !e.shiftKey)
{
    // prevent default behavior
    e.preventDefault();
}
});

将您的小提琴更新为

$(".Post_Description_Text").keydown(function(e){
if (e.keyCode == 13 && !e.shiftKey)
{
  // prevent default behavior
  e.preventDefault();
  //alert("ok");
  return false;
  }
});

【讨论】：

这回答了这个问题。请记住，还有其他方法可以在文本区域中获得换行符，例如粘贴或拖放。在这种情况下，您可能还想处理更改事件，并替换 \r\n 而不是阻止该事件。
我可以确认.preventDefault() 也可以在纯 JavaScript 中工作。
@TalKohavy Jquery 是一个 Javascript 库，不是吗？正如上面的 cmets 所述，.preventDefault() 也可以在纯 JavaScript 中工作。 另外，如果你看看他的 jsfiddle，它是用 Jquery 编写的。

【解决方案2】：

下面的代码是为了防止调整“textarea”的大小，避免textarea内出现滚动条，同时防止按下回车键进入下一行。

style.css

textarea {height:200px; width:200px;overflow:hidden;resize: none;}

index.html

<textarea></textarea>

Script.js

$("textarea").keydown(function(e){
    // Enter pressed
    if (e.keyCode == 13)
    {
        //method to prevent from default behaviour
        e.preventDefault();
    }
});

【讨论】：

是的，这对我有用，但它也表明我不推荐使用 keyCode 是否有任何替代方法
if (e.key == "Enter") { //你的代码 }

【解决方案3】：

React：带有值和 onChange 事件的文本区域

const PreventTextAreaEnter = () => {
   const [comment, setComment] = useState();

   const handleTextArea = (e) => {
      console.log({e}) // Destructure to get a more accurate log 

      // Return if user presses the enter key
      if(e.nativeEvent.inputType === "insertLineBreak") return;

      setComment(e.target.value);
   };

   return (
    <>
      <textarea value={comment} onChange={ (e) => { handleTextArea(e) } />
    </>
   )
  }

【讨论】：

谢谢！那 if 语句究竟是我所缺少的。为我解决了。

【解决方案4】：

    $(".Post_Description_Text").keypress(function(event) {

      if (event.which == 13) {        

        alert("Function is Called on Enter");

          event.preventDefault(); //Add this line to your code

       }

   });

【讨论】：

【解决方案5】：

对于 Angular 用户

虽然有现有的可行解决方案，但如果有人使用 Angular 遇到此问题，您可以使用以下方法禁用新行：

添加<textarea ng-trim="false" ng-model='your.model' ...

在您的控制器中，添加：

$scope.$watch('your.model', function(newvalue, oldvalue) {
    if (newvalue && newvalue.indexOf('\n') > -1) {
       $scope.your.model = oldvalue;
    }
});

【讨论】：

这会将光标移到文本的末尾

【解决方案6】：

在您的 HTML 中使用 input 标记而不是 textArea 标记

【讨论】：

输入不能换行。 CSS 解决方案是非标准的。唯一的方法是使用文本区域进行长输入。