disable a textarea with angularjs

Question

I am trying to disable a textarea from handling a keyboard event when ever a user presses the enter key of the keyboard when the textarea is empty using angularjs. I have been able to disable the submit button when the textarea is empty but I am trying to disable the textarea when from enter event when the textarea is empty.

This is my attempt:

<div class="descriptionarea">
    <textarea ng-model="trackTxt" id="input" ></textarea>
    <span class="buttonfortxtarea">
    <button ng-disabled="!trackTxt" class= "btn btn-mini description_submit" id="new-chat-button">Submit</button></span>
    </div>

When I hit enter from my textarea it triggers event using the following code

document.getElementById('input').addEventListener('keyup', function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) { // enter key press
            send();
        }
    });

The above code works whether the textarea is empty or not.

EDITTED:

In my app.js of angularjs

app.controller('TodoCtrl',function($scope){

    //handle javascript enter event on key up
   // function TodoCtrl($scope) {

    $scope.trackTxt;
    $scope.send = function($event){
        alert('TEST');
  }

  $scope.isEmpty = function(param){
    return param.trim().length === 0;
  }
//}

});

In jsp file

<div ng-controller="TodoCtrl">
     <textarea ng-keyup="$event.keyCode == 13 && !isEmpty(trackTxt) && send($event)" ng-model="trackTxt" id="input" ></textarea>
    <span class="buttonfortxtarea">
    <button ng-disabled="!trackTxt" ng-click="send($event)" class= "btn btn-mini description_submit" id="new-chat-button">Submit</button></span>
  </div></div>

Please how can I use angularjs to prevent the enter event from happening when ever the text-area is empty.

Waht do you want to achieve by doing such disabling of event which disable some events and so ...? — Hamlet Hakobyan
– Hamlet Hakobyan, Commented Aug 18, 2016 at 15:30
Ok, may be do you want to disable submit button when there is no text in textarea haven't take in account spaces and enters? — Hamlet Hakobyan
– Hamlet Hakobyan, Commented Aug 18, 2016 at 15:34
If the textarea is blank or has no text disable it from triggering the enter keyboard using angular — user6731422
– user6731422, Commented Aug 18, 2016 at 15:37
I dont want the textarea to send an empty text using angularjs — user6731422
– user6731422, Commented Aug 18, 2016 at 15:40

Vipul Panth · Accepted Answer · 2016-08-18 16:20:23Z

1

You can use ng-keyup for attaching an function on enter key press,

ng-keyup="$event.keyCode == 13 && functionToCall()"

Here is demo,

Thanks

answered Aug 18, 2016 at 16:20

Vipul Panth

5,9114 gold badges18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Vipul Panth Over a year ago

This way you can use angular directive ng-keyup for attaching key up event listener handler.

Vipul Panth Over a year ago

Check this update FIDDLE as this contains all the requirement you mention , Sorry i missed one on my previous one, Thanks, Hope this helps.

user6731422 Over a year ago

I am having some issues implementing this in my project

Vipul Panth Over a year ago

can you share how you are implementing?

Vipul Panth Over a year ago

which angular version you are using

|

DIEGO CARRASCAL · Accepted Answer · 2016-08-18 17:52:48Z

0

You could simply check if it's empty...

document.getElementById('input').addEventListener('keyup', function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13 && $(this).val() != "") { // enter key press
            send();
        }
});

This also may work:

document.getElementById('input').addEventListener('keyup', function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13 && $(this).val().length <= 0) { // enter key press
            send();
        }
});

To prevent the default enter use preventDefault() Event Method

document.getElementById('input').addEventListener('keyup', function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13 && $(this).val().length <= 0) { // enter key press
            e.preventDefault(); //This avoid the enter...
        }
});

How about the sendChat()...

document.getElementById('input').addEventListener('keyup', function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13 && $(this).val().length <= 0) { // enter key press
            e.preventDefault(); //This avoid the enter...
        }
        else if(code == 13 && $(this).val().length > 0) {
            sendChat();
        }
});

edited Aug 18, 2016 at 17:52

answered Aug 18, 2016 at 15:28

DIEGO CARRASCAL

2,12916 silver badges16 bronze badges

8 Comments

user6731422 Over a year ago

This prevents enter event of the keyboard

user6731422 Over a year ago

On hitting the enter keyboard, nothing happens even when there is text in the textarea

user6731422 Over a year ago

I want the enter key of the keyboard to happen only when there is text in the textarea

DIEGO CARRASCAL Over a year ago

@user6731422

document.getElementById('input').addEventListener('keyup', function (e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 13 && $(this).val().length > 0) { e.preventDefault(); } });

this one (the last one, should be doing exactly that...

user6731422 Over a year ago

what about this method sendChat();

|

Collectives™ on Stack Overflow

disable a textarea with angularjs

2 Answers 2

13 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related