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

Ensuring radio button validation prior to redirecting to contact form

What could be causing the movement of my main navigation links when hovering over another top-level element?

A Guide to Displaying HTTP Error Messages on the Angular Login Page

The ng-click function ceases to work properly once a toaster is defined within a

Organize various base arrangements within Angular version 2

Collapse or display div elements with jQuery - First close all other elements before opening the selected item

The functionality of AngularJS UI.router multiple views on a single page is not functioning properly

:Incorporating active hyperlinks through javascript

Establish the height of the root to be the same as the height

Child div height exceeds parent container bounds

Generating a registration key for a Laravel application using a distinct frontend application

Updating a $scope variable within a loop in AngularJS

Having challenges retrieving information from MySQL in AngularJS

Could it be a typical issue that arises when utilizing select elements and including both the $options.placeholder and id attributes for custom validation, resulting in $invalid always being

Superimpose two actionlinks and prioritize the one appearing above

Front Page Luma Design for Magento Platform

retrieving values from an array in ng-model and displaying them within <input

Struggling to align nested grids in the center

Arranging Bootstrap divs vertically and then horizontally in mobile view

Hide additional tabs on the page when the width of the tabs exceeds the page width