CODEWITHSUNDEEP
textareanewlineentershift
Hassan Sardar
Hassan Sardar

Reputation: 4523

Disable New Line in Textarea when Pressed ENTER

I am calling a function whenever someone press enter in the textarea. Now I want to disable new line or break when enter is pressed.

So new line should work when shift+enter is pressed. In that case, the function should not be called.

Here is jsfiddle demo: http://jsfiddle.net/bxAe2/14/

Upvotes: 51

Views: 105498

Answers (7)

Rizmy Abdulla
Rizmy Abdulla

Reputation: 31

For Svelte Users:

Add on:keydown event:

<textarea on:keydown={(e) => e.key === "Enter" && e.preventDefault()}/>

Upvotes: 0

Jason
Jason

Reputation: 923

React: textarea w/ value and onChange event

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

Upvotes: 3

nano dev
nano dev

Reputation: 433

Below code is to prevent to getting resize the "textarea", avoid scroll bar inside textarea, and also prevent to get into next line when enter key is pressed.

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();
    }
});

Upvotes: 6

Matt Goodrich
Matt Goodrich

Reputation: 5095

For Angular Users

While there are existing working solutions, if anyone comes across this question using Angular, you can disable new lines with the following:

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

In your controller, add:

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

Upvotes: 0

Rashad Rose
Rashad Rose

Reputation: 1

use the input tag instead of textArea tag in your HTML

Upvotes: -10

Nirav Thakar
Nirav Thakar

Reputation: 166

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

      if (event.which == 13) {        

        alert("Function is Called on Enter");

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

       }

   });

Upvotes: 0

Scary Wombat
Scary Wombat

Reputation: 44813

try this

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

update your fiddle to

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

Upvotes: 83

Related Questions