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

我想要将输入字段的类型从文本更改为密码。如何更改按键上的输入字段的类型 - angularjs

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

任何人都可以帮助我。

我的代码改变从文字上的onclick功能密码类型是

<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   { 
    /*color:#999;*/ 
    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%; 
    /*width:100px; */ 
    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; 
}

来源

2017-04-11 sudarsan

分享自己的所有到目前为止已经试过..也许一个plunker /小提琴？ – tanmay

你可以使用javascript/jquery。？ – Chirag

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

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

您可以使用onblur事件类似地更改聚焦类型。

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

来源

2017-04-11 06:19:27

@sudarsan：我希望这是你需要的东西 –

我在同一个输入字段中同时使用了onfocus和onblur。现在它正在工作。谢谢。 – sudarsan

我希望是您正在寻找的解决方案，您可以尝试它。

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>

来源

2017-04-11 06:33:22

您需要的input的属性type与控制器的型号，如下结合：

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

还附上了ng-focus和ng-blur属性吧。

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

在控制器的方法定义：

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

Demo

来源

2017-04-11 06:35:45 Shashank

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

回答

相关问题