CODEWITHSUNDEEP
javascriptjqueryangularjs
Krishna
Krishna

Reputation: 41

mouse over text on ng-disable input as textbox

I have two text box like this, as soon as you enter some text in textbox1, textbox2 will be disabled, which is working. Second requirement is, upon disable, on hover over the second text, it should display "You can enter only in one textbox".

Can someone please help me on this..,

Upvotes: 0

Views: 613

Answers (2)

Gabriel Martinez Bustos
Gabriel Martinez Bustos

Reputation: 511

This is my solution, you must put a ng-disabled with the conditional for the firs requirement and the input title with a angularjs expression:

html

<div ng-app="myApp">
 <div ng-controller="validateController as vm">
  <input type="text" ng-model="vm.first" >
  <input type="text" ng-model="vm.second" 
    ng-disabled="!!vm.first" title="{{vm.first ? 'You can enter only in one textbox': ''}}">
 </div> 
</div>

js

(function(){
 angular.module('myApp',[]);
})();

(function(){ 
  angular.module('myApp')
  .controller('validateController',validateController);

  function validateController(){
   var vm = this;    
  }
})();

this is the codepen solution

Upvotes: 1

Kristaps
Kristaps

Reputation: 11

Here is code: 

<html>
<body>

<input type="text" id="firstbox" onmouseleave="disablesecond(3)" onmouseover="disablesecond(2)">
<input type="text" id="second"  onmouseleave="disablesecond(3)" onmouseover="disablesecond(1)">
<p id="info"></p>
<script>
   function disablesecond(needtoblock){
        if(needtoblock == 1){
         document.getElementById("firstbox").disabled = true;
         document.getElementById("second").disabled = false;
         document.getElementById("info").innerHTML= "Only one box!";
        }else if(needtoblock == 2){
         document.getElementById("second").disabled = true;
         document.getElementById("firstbox").disabled = false;
          document.getElementById("info").innerHTML= "Only one box!";
        }else{
         document.getElementById("firstbox").disabled = false;
         document.getElementById("second").disabled = false;
         document.getElementById("info").innerHTML= "";
        }
   }
</script>

</body>
</html>

Upvotes: 0

Related Questions