Làm cách nào để chúng tôi có thể hiển thị/ẩn nhập mật khẩu trong js góc với bootstrap 3?

Question

Tôi muốn hiển thị/ẩn nhập mật khẩu trong js góc với bootstrap 3, tùy chọn chuyển đổi cần phải ở bên trong đầu vào. Bạn có thể cung cấp một đoạn trích hoặc ví dụ về điều đó không. Cảm ơn rất nhiều.

Answer 1

bạn chỉ có thể làm

<input ng-show="showpassword" type="text" ng-model="password"> 
<input ng-hide="showpassword" type="password" ng-model="password"> 
<input type="checkbox" ng-model="showpassword" ng-checked="false"> 

đọc here

Answer 2

Bạn muốn hộp đầu vào để được ẩn hoặc hiển thị/ẩn mật khẩu?

Dưới đây là những gì tôi đã làm cho đến bây giờ

HTML

<div class="btn-group"> 
    <input ng-hide="hidevar" id="searchinput" type="password" class="form-control" placeholder="password" > 
     <span id="searchclear" ng-click="hideinpbox();">HIDE</span> 
</div> 

CSS:

#searchinput { 
    width: 200px; 
} 

#searchclear { 
    position:absolute; 
    right:5px; 
    top:0; 
    bottom:0; 
    height:14px; 
    margin-top:7px; 
    margin-right:5px; 
    font-size:14px; 
    cursor:pointer; 
    color:#ccc; 
} 

http://plnkr.co/edit/TfKvlh1mM6wsNrPQKY4Q?p=preview

Answer 3

Sử dụng một đầu vào độc đáo và chuyển đổi loại hình của mình như thế này:

lớp

<input type="{{inputType}}" placeholder="Put your password" /> 

khiển

// Set the default value of inputType 
    $scope.inputType = 'password';  
    // Hide & show password function 
    $scope.hideShowPassword = function(){ 
    if ($scope.inputType == 'password') 
     $scope.inputType = 'text'; 
    else 
     $scope.inputType = 'password'; 
    }; 

http://codepen.io/gymbry/pen/fJchw/

Answer 4

AngularJS/UI Bootstrap Giải pháp

• Sử dụng Bootstrap để hiển thị một biểu tượng bên trong lĩnh vực đầu vào.
• Hãy chắc chắn rằng các biểu tượng có style="cursor: pointer; pointer-events: all;"
• Sử dụng ng-if để hiển thị/ẩn các hình thức khác nhau, nơi các <label type="password"> vs <label type="text">

HTML

<!-- index.html snippet -->  

<!-- show password as type="password" --> 
<div ng-if="!showPassword" 
     class="form-group has-feedback"> 
    <label>password</label> 
    <input type="password" 
      ng-model="params.password" 
      class="form-control" 
      placeholder="type something here..."> 
    <span ng-if="params.password" 
      ng-click="toggleShowPassword()" 
      class="glyphicon glyphicon-eye-open form-control-feedback" 
      style="cursor: pointer; pointer-events: all;"> 
    </span> 
    </div> 

    <!-- show password as type="text" --> 
    <div ng-if="showPassword" 
     class="form-group has-feedback"> 
    <label>password</label> 
    <input type="text" 
      ng-model="params.password" 
      class="form-control" 
      placeholder="type something here..."> 
    <span ng-if="params.password" 
      ng-click="toggleShowPassword()" 
      class="glyphicon glyphicon-eye-close form-control-feedback" 
      style="cursor: pointer; pointer-events: all;"> 
    </span> 
    </div> 

Javascript

// app.js 

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

app.controller('MainCtrl', function($scope) { 
    $scope.params = {}; 
    $scope.showPassword = false; 
    $scope.toggleShowPassword = function() { 
     $scope.showPassword = !$scope.showPassword; 
    } 
}); 

Give it là spin với plunker: http://plnkr.co/edit/oCEfTa?p=preview

Answer 5

Bạn có thể tự động thay đổi kiểu đầu vào với các chỉ ng-attr-type. Ví dụ:

<input ng-attr-type="{{ showPassword ? 'text' : 'password' }}"> 

bạn có thể liên kết showPassword với sự kiện nhấp và chuyển đổi sự kiện.

Answer 6

Bạn cũng có thể thử này một

<input type="{{showPassword?'text':'password'}}" /> 
<input type="checkbox" title="Show Password" ng-model="showPassword" ng-checked="showPassword"> 

Answer 7

Dưới đây là một bản demo làm việc:

var app = angular.module('myApp', []); 
 
app.controller('loginCtrl', function($scope) { 
 
    $scope.showPassword = false; 
 

 
    $scope.toggleShowPassword = function() { 
 
    $scope.showPassword = !$scope.showPassword; 
 
    } 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form name="form" ng-app="myApp" ng-controller="loginCtrl" novalidate> 
 
    <label> 
 
    Password: 
 

 
    <input type="password" name="password" ng-model="password" ng-attr-type="{{ showPassword ? 'text':'password'}}" /> 
 
    <div ng-click="toggleShowPassword()" ng-class="{'fa fa-eye': showPassword,'fa fa-eye-slash': !showPassword}" style="cursor: pointer;"></div> 
 

 
    </label> 
 
</form>