Discover the steps to modify the input field type with just a keypress in angularjs

Question

Discover the steps to modify the input field type with just a keypress in angularjs

I need help changing an input field type from text to password.

Currently, I am able to change the input field type from text to password when clicking on it. However, I also want the type to change from text to password when tab is pressed.

Any assistance would be appreciated.

The code snippet where I am currently changing the type on click function is as follows:

<input type="text" name="password" class="form-control5 floating-input" ng-model="vm.password" required autocomplete="off" onclick="(this.type='password')" value="secure"/>
<span class="highlight"></span>
<span class="bar"></span>
<label for="password" class="field-name">Password</label>

label {
  font-size:16px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all;
}

.highlight {
  position:absolute;
  height:60%;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

.floating-label {
  position:relative;
  margin-bottom:20px;
}

.floating-input , .floating-select {
  font-size:14px;
  padding:4px 4px;
  display:block;
  width:100%;
  height:30px;
  background-color: transparent;
  border:none;
  border-bottom:1px solid #ccc;
}

.floating-input:focus , .floating-select:focus {
     outline:none;
}

.floating-input:focus ~ label, .floating-input:not([value=""]):valid ~ label {
      top:-18px;
      font-size:14px;
      color:#333;
      font-weight: 600;
}

css angularjs

Answer 1

Answer №1

Utilize the onfocus function just like you would with onclick. Here's an example:

<input type="text" onfocus="this.type='password'" value="Password"/>

You can also switch the type back on focus out by using the onblur event.

<input type="text" onblur="this.type='text'" value="Password"/>

Answer 2

Utilize the onfocus function just like you would with onclick. Here's an example:

<input type="text" onfocus="this.type='password'" value="Password"/>

You can also switch the type back on focus out by using the onblur event.

<input type="text" onblur="this.type='text'" value="Password"/>

Answer 3

Answer №2

If you're looking for a solution, give this a try.

var app = angular.module('cft', []);
app.controller('changeproperty', function($scope) {
  $scope.vm = {};
  $scope.fieldType = 'text';
  $scope.changeField = function(){
    $scope.fieldType = 'password';
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="cft">
  <div ng-controller="changeproperty">
    <input type="{{fieldType}}" name="password" class="form-control5 floating-input" ng-blur="changeField()" ng-model="vm.password" required autocomplete="off" value="secure"/>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label for="password" class="field-name">{{fieldType}}</label>
  </div>
</div>

Answer 4

If you're looking for a solution, give this a try.

var app = angular.module('cft', []);
app.controller('changeproperty', function($scope) {
  $scope.vm = {};
  $scope.fieldType = 'text';
  $scope.changeField = function(){
    $scope.fieldType = 'password';
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="cft">
  <div ng-controller="changeproperty">
    <input type="{{fieldType}}" name="password" class="form-control5 floating-input" ng-blur="changeField()" ng-model="vm.password" required autocomplete="off" value="secure"/>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label for="password" class="field-name">{{fieldType}}</label>
  </div>
</div>

Answer 5

Answer №3

To connect the type attribute of the input with a controller model, follow these steps:

<input type="{{inputType}}" />

Additionally, include the ng-focus and ng-blur attributes:

<input ng-focus="updateType('email')" ng-blur="updateType('text')" />

The controller method should be defined as follows:

 $scope.updateType = function(type) {
    $scope.inputType = type;
 }

Demo

Answer 6

To connect the type attribute of the input with a controller model, follow these steps:

<input type="{{inputType}}" />

Additionally, include the ng-focus and ng-blur attributes:

<input ng-focus="updateType('email')" ng-blur="updateType('text')" />

The controller method should be defined as follows:

 $scope.updateType = function(type) {
    $scope.inputType = type;
 }

Demo

Answer 7

Answer №4

To successfully tackle this issue, I incorporated a boolean variable along with a function that alters the state of this variable within the controller. Here is an example:

$scope.showPassword = false;
$scope.togglePassword = function() {
    $scope.showPassword = !$scope.showPassword

}

Subsequently, in the HTML layout, I integrated this feature using a ternary operator:

<input type='{{(showPassword)? text : password }}' />
<i class='{{(showPassword)? icon-eye-open : icon-eye-close }}' ng-click='togglePassword()' ><i/>

Answer 8

To successfully tackle this issue, I incorporated a boolean variable along with a function that alters the state of this variable within the controller. Here is an example:

$scope.showPassword = false;
$scope.togglePassword = function() {
    $scope.showPassword = !$scope.showPassword

}

Subsequently, in the HTML layout, I integrated this feature using a ternary operator:

<input type='{{(showPassword)? text : password }}' />
<i class='{{(showPassword)? icon-eye-open : icon-eye-close }}' ng-click='togglePassword()' ><i/>

Discover the steps to modify the input field type with just a keypress in angularjs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to position preloader at the center in materializeCSS

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Utilize a jQuery button to horizontally align text with ellipsis

Issue with database connection on iOS device seems to be causing trouble

Develop a navigation system with forward and backward buttons to easily navigate between

Sending an HTTP GET request to an API can result in different outcomes depending on whether it is sent to localhost or to a remote server. In some cases, the

Trouble with highlighting the chosen menu item

Encountered a "no login transports available" error while trying to use Firebase

Arranging cards in a stack using VueJS

Display an assortment of various categories once every other time

Position two div elements so that the second div expands to occupy the entire available space

updating the HTML DOM elements using JavaScript is not yielding any response

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

What is the best way to change the background color for my photo gallery?

Unable to access image from JSON within Mobile Angular Ui utilizing Angular Js

Increasing the maximum width of an image in CSS is necessary to see the max-height take effect

Synchronous Http calls in AngularJS Promise Handling

Creating boxes with equal heights in HTML and CSS

Subdomain Dilemma: Trouble with Images in Internet Explorer

Conceal or reveal buttons using JavaScript