按下 ENTER 时禁用 Textarea 中的新行

Posted 2023-02-22

【中文标题】按下 ENTER 时禁用 Textarea 中的新行

【英文标题】：Disable New Line in Textarea when Pressed ENTER

【发布时间】：2013-09-17 17:29:10

【问题描述】：

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

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

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

【参考方案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 解决方案是非标准的。唯一的方法是使用文本区域进行长输入。