按下ENTER键时禁用文本区域中的换行功能

Question

每当有人在 textarea 中按下 enter 键时，我都会调用一个函数。现在我希望在按下 enter 时禁用 new line 或换行。

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

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

- Hassan Sardar

Answer 1

试一试

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

将您的fiddle更新为

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

- Scary Wombat

---

这回答了这个问题。请记住，还有其他方法可以在您的文本区域中换行，例如粘贴或拖放。在这种情况下，您可能还想处理更改事件，并替换\r\n而不是阻止事件。 - Oliver Schimmer

我可以确认，在纯JavaScript中，.preventDefault()也是有效的。 - mythofechelon

@TalKohavy Jquery是JavaScript库，不是吗？正如上面的评论中所指出的，*.preventDefault()在纯JavaScript中也可以使用*。此外，如果您查看他的jsfiddle，它是用Jquery编写的。 - Scary Wombat

Answer 2

以下代码是为了防止 "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();
    }
});

- nano dev

---

是的，这对我有效，但它也显示 keyCode 已被弃用，有没有其他替代方法？ - Om Fuke

如果 (e.key == "Enter") { //你的代码 } - nano dev

Answer 3

React: 带有value和onChange事件的textarea

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) } />
    </>
   )
  }

- Jason

---

谢谢！那个if语句正是我所缺少的。它为我解决了问题。 - Tal Kohavy

在TypeScript中，我无法在naviteEvent内找到inputType。 我的类型是（e：KeyboardEvent<HTMLTextAreaElement>） - Werthis

在TypeScript中，我无法在nativeEvent中找到inputType。 我的类型是(e: KeyboardEvent<HTMLTextAreaElement>)。 - undefined

我会搜索事件对象，看它是否嵌套在某个地方。 - Jason

Answer 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

       }

   });

- Nirav Thakar

Answer 5

针对Angular用户

虽然已经有现成的解决方案，但如果有人使用Angular遇到这个问题，可以通过以下方式禁用换行：

在你的HTML代码中添加：<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;
    }
});

- Matt Goodrich

---

这将把你的光标扔到文本末尾。 - Győri Sándor

Answer 6

在你的 HTML 中，使用 input 标签而不是 textArea 标签

- Rashad Rose

---

输入不能换行。CSS解决方案不是标准的。唯一的方法是使用文本区域来处理长输入。 - Oliver Schimmer