javascript - Enable a button on entering text in input field - Stack Overflow

admin管理员组

文章数量:1425738

I want to enable a button only when a text is entered on an input field. So far I have this code on my app.js

.controller("EnableDisable", function(){
  $scope.editableInput = false;
})

.directive("inputDisabled", function(){
  return function(scope, element, attrs){
    scope.$watch(attrs.inputDisabled, function(val){
      if(val)
        element.removeAttr("disabled");
      else
        element.attr("disabled", "disabled");
    });
  }
});

This is the view implementation :

<div ng-controller="EnableDisable">
<input type="text" input-disabled="editableInput" />
<button ng-click="editableInput = !editableInput">enable/disable</button>
      </div>

This is the plunk url: Presently when I launch the app, the button is not disabled by default. Please with the above challenge how can I make the button clickable (receive events)when a text is entered on the input field. Kindly assist!

I want to enable a button only when a text is entered on an input field. So far I have this code on my app.js

.controller("EnableDisable", function(){
  $scope.editableInput = false;
})

.directive("inputDisabled", function(){
  return function(scope, element, attrs){
    scope.$watch(attrs.inputDisabled, function(val){
      if(val)
        element.removeAttr("disabled");
      else
        element.attr("disabled", "disabled");
    });
  }
});

This is the view implementation :

<div ng-controller="EnableDisable">
<input type="text" input-disabled="editableInput" />
<button ng-click="editableInput = !editableInput">enable/disable</button>
      </div>

This is the plunk url: https://plnkr.co/edit/bHtZJ1H5JvM2XTuhft6J?p=preview Presently when I launch the app, the button is not disabled by default. Please with the above challenge how can I make the button clickable (receive events)when a text is entered on the input field. Kindly assist!

• javascript
• angularjs

Share Improve this question Follow edited Feb 4, 2016 at 12:01 user57508 asked Feb 4, 2016 at 11:22 BlazeBlaze 2,3491212 gold badges4444 silver badges8585 bronze badges 7

• just a question.. Why are you not using form validations – Minato Commented Feb 4, 2016 at 11:27
• please create JSFiddle of your code – Amit Ramoliya Commented Feb 4, 2016 at 11:28
• what do you mean trigger the button? – Navoneel Talukdar Commented Feb 4, 2016 at 11:34
• Here is plnk I have made: plnkr.co/edit/bHtZJ1H5JvM2XTuhft6J?p=preview – Blaze Commented Feb 4, 2016 at 11:36
• Why you want do it using directory?Other not acceptable? – RIYAJ KHAN Commented Feb 4, 2016 at 11:46

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

you can do this with Angular.

<input type="text" ng-model="textEntered" />
<button ng-disabled="!textEntered">Continue</button>

Try this one

controller("EnableDisable", function($scope){
  $scope.textEntered = "";
});

HTML :

<button ng-disabled="!textEntered">enable/disable</button>

Please refer Plunker

You will have to set initial scope value like this.Note that I have set it false so condition will negate and make button disable on page load.Then I have set a watch on input value accordingly toggled the scope value.

var app = angular.module('plunker', []);

app.controller("EnableDisable",  function(){    
  $scope.textEntered=false;

  $scope.$watch($scope.textEntered,function(v)
  {
   if(v)
   {
     $scope.textEntered=true;
   }
   else
   {
     $scope.textEntered=false;
   }
  }
  );
});

and html is -

<input type="text" ng-model="textEntered" />
<button ng-disabled="!textEntered">Continue</button>

https://plnkr.co/edit/o1Im8MSXbEa8kyqPqBB9?p=preview

本文标签： javascriptEnable a button on entering text in input fieldStack Overflow