angular2--input框实现密码眼睛切换

最新推荐文章于 2021-10-13 09:26:22 发布

Ariel_ckr

最新推荐文章于 2021-10-13 09:26:22 发布

阅读量603

点赞数

分类专栏： angular2+onsenui框架文章标签： angular2 input 密码眼睛切换

本文链接：https://blog.csdn.net/Ariel_201311/article/details/100170029

版权

本文介绍如何在Angular2应用中实现输入框的密码显示切换功能，包括html结构设计、typescript逻辑处理和相应的css样式设置。

摘要由CSDN通过智能技术生成

实现效果如下：
在这里插入图片描述
一、html

<ons-page>
	<ons-toolbar></ons-toolbar>
	<div class="background"></div>
	<div class="content">
		<div class="r-psw-cnt">
			<!--input框类型和眼睛的路径都存为变量-->
			<input type

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ariel_ckr

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

04-WebApl

人俗话不多

03-08

674

Web Apis 和 JS基础关联性 JS 的组成 API 和 Web api MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API API 是为我们程序提供的一个接口 , 帮助我们实现某种功能 Web API 主要针对于浏览器提供的接口 , 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) . 主要针对于浏览器做交互效果 Web API 一般都有输入和输出 ( 函数的传参和返回值...

HTML5面试题

YaToue

04-10

1万+

HTML5面试题一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? 声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，混杂模式是一种向后兼容的解析方法。触发...

参与评论您还未登录，请先登录后发表或查看评论

angularjs -- 密码输入框的内容可见与隐藏（ng-class）

liayn523的博客

03-17

2421

在注册或登录密码输入框右侧会出现一个眼睛的小图标，点击时密码可见或隐藏，这个功能用angularjs的ng-class的属性，很容易就实现了，如下： 1. html代码：设置密码：重复密码： 2.controller代码： // 初始化输入框的变量 $scope.inputType = "text"; $scope.input

Angular6 下的注册界面中的密码框隐藏密码和明文密码切换

白不懂黑的静的专栏

06-05

1231

技术： Angular6+bootStrap 需求：做一个注册界面，界面上有一个密码输入框，默认情况下，密码框输入显示给客户是看不到明文的，但实际中，有时用户都不知道自己的密码是什么了，因此，在密码框中增加一个小图标，点击小图标后，密码框中的值可以进行显示和密码形式的切换。思路：点击小图标后，小图标切换，密码输入框的type值在text和password之间进行切换涉及知识点： Angular6对dom的操作，尤其是对dom元素的属...

Angular4_显示隐藏密码(小眼睛)

Martin 的博客

11-12

1554

效果图代码： <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username"&a

angularjs2.x 密码隐藏显示的实例

xuehu837769474的博客

04-16

796

angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目，注册页的密码的input一般用password，但是用户输入密码时可能会输入错误，需要显示成text。首先，输入框的类型判断； <ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input&g...

jQuery实现百度登录框的动态切换效果

10-19

主要介绍了jQuery实现百度登录框的动态切换效果,需要的朋友可以参考下

登录密码，眼睛效果，点击显示，点击隐藏

若水印象博客

07-10

9983

$(document).ready(function(){ $(".userinfo_main_csrq i").click(function(){ if ($( this ).siblings("input").attr("type") == "text") { $( this ).siblings("input")[0].type = "passwo

input输入款点击小眼睛显示或隐藏密码

04-19

总结来说，实现“input输入款点击小眼睛显示或隐藏密码”的功能，主要涉及到HTML、CSS和JavaScript的配合。前端开发者需要理解`<input type="password">`的特性，以及如何通过JavaScript监听和改变元素的属性。在...

angularjs2 ng2 密码隐藏显示的实例代码

10-19

在AngularJS2（通常简称为Angular 2或ng2）框架中，开发移动应用时，密码输入是一个常见的功能。为了增强用户体验，有时我们需要提供一个功能，让用户能够切换密码的隐藏和显示状态。在这个实例中，我们将看到如何...

实现密码输入框小眼睛的功能

热门推荐

小学生的博客

09-06

3万+

最近上课说了前端HTML和javascript，以前只是初略学习，现在需要做一个小项目，每个人写些页面，因为对前端不太了解，写起来很吃力啊。但是一点一点学习。用的是bootstrap框架。做一个登陆页面，要实现输入框点击小眼睛可以看见密码明文。如图，HTML代码是：四方考试系统用户登录

angular密码和确认密码的校验

u013429010的博客

08-17

1437

确认密码 <input nz-input formControlName="password" (ngModelChange)="passwordChange($event)" [(ngModel)]="resetPassWordVo.password" required type="password" autocomplete="off"> <input nz-input formCont

用angular自带的方法获取input中内容（以用户名和密码为例）的字符串长度方法...

weixin_30745553的博客

09-07

1338

<input id= "username" type= "text" placeholder="username">;<inpur id= "password" type= "password" placeholder= "password">var usernameLength = angular.element('#username').val().length;var...

【Angular】修改密码功能实现

心似烟火

06-03

2143

前言：最近项目组需要做一个修改密码的功能，为大家介绍一下。 modify-password.html： <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <...

点击眼睛图标更改密码显示格式

weixin_38245489的博客

08-14

2617

使用场景： <view class="info_input"> <input type="{{passwordType}}" placeholder-class="incolor" maxlength="16" name="password" placeholder="请输入密码" /&amp

案例--密码小眼睛(星号和显示的切换)

tby_pr的博客

10-13

932

分析: + input 为什么会显示 ...... => 因为 type 是 password => 只要 type 是 text, 就能显示文本内容 + 如何进行显示文本内容的操作 => 就是把该元素的 type 属性的值修改为 text => 操作元素的原生属性 type 代码实现: 1. 获取元素 ...

IE10去掉input的type=”text”输入内容时出现的小叉号（X）和type=”password”出现的小眼睛图标...

weixin_33779515的博客

03-09

322

最近在做一个后台管理系统项目，遇到以下两个问题： 1、从IE 10开始，type=”text” 的 input 在用户输入内容后，会自动产生一个小叉号（X），方便用户点击清除已经输入的文本。2、对于type=”password”的 input 则会在右方显示一个小眼睛的图标，占击这个图标可以显示已经输入的内容。有时候为了统一UI页面效果，我们不要到浏览器自带的小叉叉（×）和小眼睛图标，所有需要去...

angularjs表单验证,包括密码长度及两次密码输入是否一致

yhan219的博客

04-26

523

用户输入正确的邮箱，密码后才能点击登陆按钮。复制代码到html可直接运行：代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>register</title> <link rel="stylesheet&qu

angular input_快速地上手Angular组件开发

weixin_39595271的博客

12-01

207

如果我会一些Javascript的基础知识，我可以快速地上手Angular吗？或者说，我是一名前端工作者，没有接触过Angular，我该如何快速地使用Angular进行日常开发呢？我是轻流前端团队的一员，用了一周的时间从之前没有使用过Angular到了解Angular 可以进行一些简单的开发，在这之中收获良多，希望可以给同样想了解和使用Angular的小伙伴带来一些参考。1. 组件是什么？组件(C...

实现Angular UI-ROUTER与Symfony框架集成

链接指向的是Bundle提供的Angular UI-ROUTER的JavaScript文件，具体为`@LeosAngularRoutingBundle/Resources/public/js/vendor/angular-ui-router.js`。这里的“my-mode”需要替换为实际使用的Angular模块名称，确保...