如何在按键上更改输入字段的类型 - angularjs

时间:2017-04-11 06:03:58

标签: css angularjs

我想将输入字段的类型从文本更改为密码。

点击输入字段后,我可以将类型从文本更改为密码,但我还想在选项卡图标的按键上将类型从文本更改为密码。

任何人都可以帮助我。

onclick函数的代码更改类型从文本到密码是

$roomNo = [1,2,8];
$inQuery = implode(',', $roomNo);

$query = "SELECT * FROM room WHERE categoryId = ? AND id NOT IN (?)";
$totalRoom = $pdo->prepare($query);

$totalRoom->bindValue(1, $id, PDO::PARAM_INT);
$totalRoom->bindValue(2, $inQuery, PDO::PARAM_STR);

$totalRoom->execute();
$totalRoom = $totalRoom->fetchAll();

4 个答案:

答案 0 :(得分:0)

您可以使用与onfocus类似的onclick功能。像这样的东西

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

您可以使用onblur事件同样更改焦点类型。

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

答案 1 :(得分:0)

我希望你能找到解决方案,你可以试试。

&#13;
&#13;
var app = angular.module('cft', []);
app.controller('changeproperty', function($scope) {
  $scope.vm = {};
  $scope.fieldType = 'text';
  $scope.changeField = function(){
    $scope.fieldType = 'password';
  };
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您需要将input的属性type与控制器的模型绑定,如下所示:

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

还附加ng-focusng-blur属性。

<input ng-focus="modifyType('password')" ng-blur="modifyType('text')" />

控制器中的方法定义:

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

Demo

答案 3 :(得分:0)

我解决的方法是添加一个布尔变量和一个在控制器中切换此变量的函数。例如:

Userprofile

}

在html中,我添加了此实现,这是使用三元运算符:

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