浮雲雅築: [研究][ASP.NET][JavaScript]hideShowPassword v2.1.1隱藏、顯示密碼元件安裝、試用

[研究][ASP.NET][JavaScript][jQuery]hideShowPassword v2.1.1隱藏、顯示密碼元件安裝、試用

2017-11-09
2018-04-12、2019-02-22、2020-08-27、2022-08-22更新

開發工具：Visual Studio 2017

ideShowPassword 官方網站
https://github.com/cloudfour/hideShowPassword

package.json 中可以看到版本。

官方 LiveDemo
http://cloudfour.github.io/hideShowPassword/

如果不想下載安裝，BootCDN有提供直接引用，但因沒 example.wink.css，不會顯示眼睛圖案。
https://www.bootcdn.cn/hideshowpassword/
方法
https://cdn.bootcss.com/hideshowpassword/2.1.1/hideShowPassword.js
https://cdn.bootcss.com/hideshowpassword/2.1.1/hideShowPassword.min.js

2022-08-22發現已經 CDN 上更新到 2.2.0版。

但 GitHub 網站上維持 2017-09-12 的 v2.1.1版

https://github.com/cloudfour/hideShowPassword/tags

CDNJS 上

https://cdnjs.com/libraries/hideshowpassword

提供的也是 2.2.0 版

https://cdnjs.cloudflare.com/ajax/libs/hideshowpassword/2.2.0/hideShowPassword.min.js

(下圖) 下載得到 hideShowPassword-master.zip

(下圖) 啟動 Visual Studio 2017 建議新的專案

(下圖) hideShowPassword 需要 jQuery，敝人用 NuGet 去安裝 jQuery
( NuGet 目前沒有提供 hideShowPassword )

(下圖) NuGet 目前沒有提供 hideShowPassword，直接把一開始下載得到的 hideShowPassword-master.zip 解壓縮，把 hideShowPassword-master 改名 hideShowPassword，從「檔案總管」中把 hideShowPassword 拖到 Visual Studio 中合適的位置
( 可以考慮專案名稱 ( WebApplicatin2) 之下，或 Scripts 目錄之下 )

(下圖) 接下來把要用到的一些 scripts 或 css 拖到 Default.aspx 檔案中
因為 hideShowPassword 需要 jQuery，所以先拖 jQuery 過來；
然後拖 hideShowPassword 過來；
為了避免圖片上一堆線看來很亂，只畫兩條線示意

如果需要眼睛圖案，要有 example.wink.css 檔案，demo.css 不需要，modernizr 套件不需要。

Default.aspx 內容最後如下 (除了拖過來的 scripts 和 css，有些要自己手動加上)

<%@ page language="C#" autoeventwireup="true" codebehind="Default.aspx.cs" inherits="WebApplication2.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script src="hideShowPassword/hideShowPassword.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link href="hideShowPassword/css/demo.css" rel="stylesheet" />
<link href="hideShowPassword/css/example.wink.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>if (Modernizr.input.placeholder) document.getElementsByTagName('html')[0].className += ' inputplaceholder';</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Password :<input class="login-field login-field-password" id="password-1" type="password" placeholder="Password">
</div>
</form>
<script>

// Example 1:
// - Password hidden by default
// - Inner toggle shown
$('#password-1').hidePassword(true);

// Example 2:
// - Password shown by default
// - Toggle shown on 'focus' of element
// - Custom toggle class
$('#password-2').showPassword('focus', {
toggle: { className: 'my-toggle' }
});

// Example 3:
// - When checkbox changes, toggle password
// visibility based on its 'checked' property
$('#show-password').change(function () {
$('#password-3').hideShowPassword($(this).prop('checked'));
});
</script>
</body>
</html>

(下圖) 執行結果

下面除了example.wink.css要用來顯示眼睛，其他幾行疑似可有可無

這幾行若註解調，顯示效果如下圖

PS：網路上好像有人說 hideShowPassword 不支援 IE 7, IE 8，敝人沒有去確認。

********************************************************************************
2020-08-27 更新，精簡如下：

Default.aspx 如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="hideShowPasswordTest.Default" %>

<!DOCTYPE html>

<%--jquery.js 和 example.wink.css 必須在 hideShowPassword.js 之前--%>

</head>

<body>

<div>

Password :<input class="login-field login-field-password" id="password-1" type="password">

</div>

</form>

$('#password-1').hidePassword(true);

</script>

</body>

</html>

hideShowPassword.js 或 hideShowPassword.min.js 任一項是必須。

若眼睛圖案要能用，下面3者必須；沒有下面3個，眼睛圖案會變成文字，上面仍可用。

css\example.wink.css

images\wink.png

images\wink.svg

********************************************************************************

如果有使用 Content Place Holder，hidePassword 使用的 ID 名稱要調整一下

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <label for='TextBox2'>密碼</label>
    <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
    <script>
        //$('#TextBox2').hidePassword(true);
        $('#ContentPlaceHolder1_TextBox2').hidePassword(true);
    </script>
</asp:Content>

********************************************************************************

可以直接連線 example.wink.css 的網址

https://raw.githubusercontent.com/cloudfour/hideShowPassword/master/css/example.wink.css

https://raw.githubusercontent.com/Platron/payment_params_templates/master/www/bower/bower_components/hideshowpassword/css/example.wink.css

(完)

相關

[研究][JavaScript]切換顯示和隱藏密碼
https://shaurong.blogspot.com/2019/02/javascript.html

[研究][ASP.NET][JavaScript] hideShowPassword 與 Fortify SCA 白箱測試
https://shaurong.blogspot.com/2018/04/aspnetjavascript-hideshowpassword.html

[研究][ASP.NET][JavaScript]hideShowPassword v2.1.1元件安裝、試用
https://shaurong.blogspot.com/2017/11/aspnet-hideshowpassword.html

浮雲雅築

2017年11月9日星期四

[研究][ASP.NET][JavaScript]hideShowPassword v2.1.1隱藏、顯示密碼元件安裝、試用

沒有留言:

張貼留言

2017年11月9日 星期四

[研究][ASP.NET][JavaScript]hideShowPassword v2.1.1隱藏、顯示密碼元件安裝、試用

沒有留言:

張貼留言

2017年11月9日星期四