Unmask Password to plain text and again mask it upon clicking a checkbox

Question

I have a password type input element in html5 as follows in my angular mvc based app.

I am having a requirement to have a checkbox near to this, and when the user clicks on the chekcbox, we display the masked password text as plain text in the same password input type textbox which is below code. And again, when the user deselect the checkbox, we should mask the plain text to mask :) Looks like it is simple, I am new here, could someone please help me with possible code

 <input type="password" name="password"
                               ng-model="model.password"
                               placeholder="Please type your password">

`$('#c').click(function () { if ($(this).is(':checked')) { $('#p').attr('type', 'text'); } else { $('#p').attr('type', 'password'); } })` where the ckeckbox has `id="c"` and the textbox has `id="p"` — , Jun 28 '16 at 04:53

M. Junaid Salaat · Accepted Answer · 2016-06-28T04:52:34.593

3

You can simply use ng-show or ng-if directive for your case.

By the following snippet the input with different type will toggle on the dom.

<input type="password" name="password"
                               ng-model="model.password"
                               placeholder="Please type your password"
                               ng-show="!showPassword">

<input type="text" name="password"
                               ng-model="model.password"
                               ng-show="showPassword">

<input type="checkbox" ng-model="showPassword">

Working Fiddle

Hope it helps.

edited Jun 28 '16 at 04:52

answered Jun 28 '16 at 04:47

M. Junaid Salaat

3,765
1
23
25

What about `ng-attr-type="{{showPassword && 'text' || 'password' }}"`? http://stackoverflow.com/a/16669790/1808494 – Aron Jun 28 '16 at 04:51
Thank you, yours seems very less code achieving the result – Jasmine Jun 28 '16 at 05:03
It works, but I can not see the checkbox. I added a label and upon clicking on label it does the job, Check password But checkbox is invisible, why – Jasmine Jun 28 '16 at 05:19
Maybe because of some css issue i guess. Can you provide me a fiddle with the invisible checkbox so could help you. You can change the fiddle I have provided with this answer and send me the new forked link. – M. Junaid Salaat Jun 28 '16 at 05:22
oh yes webkit-appearance in csss is causing this, I am working on it and let you know if I can resolve – Jasmine Jun 28 '16 at 05:34

score 0 · Answer 2 · answered Jun 28 '16 at 04:52

html

<section ng-app="myApp" ng-controller="mainCtrl">
  <input type="{{inputType}}" placeholder="Put your password" />
  <input type="checkbox" id="checkbox" ng-model="pass_cb" ng-click="togglePassword()" />
  <label for="checkbox" ng-if="pass_cb === true">Hide password</label>
  <label for="checkbox" ng-if="pass_cb === false">Show password</label>  
</section>
<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>

Js

var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', ['$scope', function( $scope ){

  $scope.pass_cb = false;
  $scope.inputType = 'password';

  $scope.togglePassword = function(){
    if ($scope.inputType == 'password')
      $scope.inputType = 'text';
    else
      $scope.inputType = 'password';
  };
}]);

See this Fiddle Demo http://jsfiddle.net/5DMjt/7278/

Unmask Password to plain text and again mask it upon clicking a checkbox

2 Answers2