基于JS實現(xiàn)密碼框(password)中顯示文字提示功能代碼
其實實際上實現(xiàn)中并不能讓password中顯示文字提示，但是我們在工作中有這樣的需求，當(dāng)沒輸入東西的時候，框內(nèi)有提示輸入密碼，但是當(dāng)輸入東西的時候又顯示的是*號，那么是如何實現(xiàn)的呢？其實原理很簡單，就是放兩個文本框，樣式以及定位都是一樣的。先將type為password的隱藏，只顯示type為text的偽密碼框，value設(shè)置提示內(nèi)容例如請輸入密碼。然后當(dāng)input觸發(fā)的時候，type為text的input隱藏，讓type為password的input顯示出來。然后當(dāng)檢測password的value為空的時候，再將type為password隱藏，type為text的顯示。啥話也不說了，上代碼。(ps:額外添加了重置功能)
先上html部分
<table class="login_table"> <tr> <td>賬號</td> <td><input type="text" value="請輸入您的賬號" class="admin" /></td> </tr> <tr> <td>密碼</td> <td> <input type="text" value="請輸入您的密碼"id="login_showPwd" /> <input type="password"id="login_password" style="display: none"/> </td> </tr> <tr> <td> <input type="button" value="登錄" /> <input type="button" value="重置" id ="btn_res"/> </td> </tr> </table>
然后上js部分
//賬號部分
$(function(){
$(".admin").focus(function(){
if($(this).val() == "請輸入您的賬號"){
$(this).val("");
}
});
$(".admin").blur(function(){
if($(this).val() == ""){
$(this).val("請輸入您的賬號");
}
});
// 密碼部分
$('#login_showPwd').focus(function(){
var text_value=$(this).val();
if(text_value == this.defaultValue){
$('#login_showPwd').hide();
$('#login_password').show().focus();
}
});
$('#login_password').blur(function(){
var text_value = $(this).val();
if(text_value==""){
$('#login_showPwd').show();
$('#login_password').hide();
}
});
//重置部分
$('#btn_res').click(function(){
$('.admin').val("請輸入您的賬號");
$('#login_password').hide().val("");
$("#login_showPwd").show();
});
});
下面給大家介紹密碼輸入框 底下顯示的文字方法
一個小的提示很多網(wǎng)站密碼輸入框里面都有密碼兩個字，以前以為是text的，值到今天才知道，它就是password標(biāo)簽，寫法如下
<input type="password" name="pas" placeholder="密碼"/>
加了一個placeholder屬性就好了
以上所述是小編給大家介紹的實現(xiàn)密碼框(password)中顯示文字提示功能代碼的相關(guān)知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- JavaScript實現(xiàn)密碼框輸入驗證
- JS實現(xiàn)密碼框效果
- JS實現(xiàn)表單中點擊小眼睛顯示隱藏密碼框中的密碼
- js實現(xiàn)input密碼框顯示/隱藏功能
- JS實現(xiàn)密碼框的顯示密碼和隱藏密碼功能示例
- js實現(xiàn)input密碼框提示信息的方法(附html5實現(xiàn)方法)
- JavaScript實現(xiàn)輸入框(密碼框)出現(xiàn)提示語
- JavaScript如何實現(xiàn)在文本框(密碼框)輸入提示語
- JS實現(xiàn)密碼框根據(jù)焦點的獲取與失去控制文字的消失與顯示效果
- javascript 密碼框防止用戶粘貼和復(fù)制的實現(xiàn)代碼
- js正則實現(xiàn)的密碼框簡單制作,還可以替換成自己想用得符號
- javascript解鎖前端密碼框常見功能做法
相關(guān)文章
詳細(xì)談?wù)凧avaScript中循環(huán)之間的差異
JS循環(huán)語句也叫迭代語句,是一種特殊的語句,主要用于需要多次執(zhí)行的代碼塊,下面這篇文章主要給大家介紹了關(guān)于JavaScript中循環(huán)之間的差異的相關(guān)資料,需要的朋友可以參考下2021-08-08
JS簡單限制textarea內(nèi)輸入字符數(shù)量的方法
這篇文章主要介紹了JS簡單限制textarea內(nèi)輸入字符數(shù)量的方法,涉及JavaScript響應(yīng)鼠標(biāo)及鍵盤事件處理textarea輸入框字符的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
下面小編就為大家?guī)硪黄鄠€上傳文件用js驗證文件的格式和大小的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
下面小編就為大家?guī)硪黄狫avaScript正則表達(dá)式-非捕獲性分組。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務(wù)器的功能
這篇文章主要介紹了vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務(wù)器的功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
中文逗號如何轉(zhuǎn)英文，下面為大家詳細(xì)介紹下，感興趣的朋友不要錯過2014-02-02
JS基于封裝函數(shù)實現(xiàn)的表格分頁完整示例
這篇文章主要介紹了JS基于封裝函數(shù)實現(xiàn)的表格分頁,結(jié)合完整實例形式分析了javascript針對table表格數(shù)據(jù)的遍歷、讀取以及模擬分頁顯示的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
JScript 8.0 VBArray 對象 提供對 Visual Basic 安全數(shù)組的訪問。2008-05-05
JavaScript數(shù)組去重算法實例小結(jié)
這篇文章主要介紹了JavaScript數(shù)組去重算法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組去重相關(guān)的讀寫、遍歷、比較、排序等操作及算法改進(jìn)相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
《JavaScript高級程序設(shè)計》閱讀筆記（一） ECMAScript基礎(chǔ)
ECMAScript基礎(chǔ),主要包括語法,變量,關(guān)鍵字,保留字,原始值和引用值等2012-02-02