如何更改按鍵上的輸入字段的類型 - 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

回答

相關問題