外掛程式 密碼輸入框

2022-05-03 20:51:06 字數 1857 閱讀 4487

這是外掛程式系列的第乙個文章,平時工作中忙裡偷閒寫了些自己的元件,現在分享一下

我的元件簡潔無依賴(不需要再引用別的庫比如jq)用原生js寫

元件樣式簡單,沒打算寫多漂亮重點實現功能

*****= 分割線 **********==

模仿支付寶密碼輸入框僅僅是功能模仿,樣式沒全部模仿; pc、移動端都能用

呼叫**:

new

passwordinput().show(

}, 3000);}})

外掛程式原始碼:

(function

() .passwordinput__none

.passwordinputshow

#passwordinput_container

.passwordinput_input

.passwordinput_inputval

#passwordinput_val`;}

}passwordinput.prototype.show = function(option)

option.inputnumber = option.inputnumber ? option.inputnumber : 4option.callback = option.callback ? option.callback : function

() {};

//渲染輸入框數量

var inputhtml = ''

for (var i = 0, ilen = option.inputnumber; i < ilen; i++)

var body = document.getelementsbytagname("body")[0];

body.insertadjacenthtml("beforeend", `

$

`);

var passwordinput = document.getelementbyid('passwordinput')

passwordinput.classlist.remove("passwordinput__none");

settimeout(

function

() , 100);

document.getelementbyid('passwordinput_val').oninput = function(event)

for (var i = 0, ilen = val.length; i < ilen; i++)

if (val.length ==option.inputnumber)

}, 100);

}document.getelementbyid('passwordinput_container').onclick=function ()

document.getelementbyid('passwordinput').addeventlistener('click', function (e)

}, false

); }

passwordinput.prototype.hide = function()

catch

(e)

}, 600);

}window.passwordinput =passwordinput

})()

完整的呼叫例子截個圖:

HTML多行文字輸入框和密碼輸入框

接下來我們寫個性簽名和密碼輸入框。多行輸入框 個性簽名是個多行輸入框。當多行文字輸入框中輸入的內容超過一行的長度時,它會自動換行,而單行文字輸入框不會換行。這裡我們會用到textarea標籤來寫多行輸入框。textarea name sign rows 5 cols 30 placeholder 請...

ABAP製作密碼輸入框

這幾天做乙個系統維護的程式,需要使用者輸入使用者名稱和密碼登入。可怎樣實現輸入密碼顯示星號的框呢?在其它語言中簡單的選那個文字框控制項作為 password 框顯示就ok了 一般會有單行 密碼和多行供選 可在abap中,把i o欄位屬性查了個遍,沒找見類似的屬性,鬱悶!下面分別介紹不同介面程式設計的...

輸入框輸入限制

public class verifytext 主監聽 regexpverifylistener regexpverifylistener null regexpverifylistener regexpverifylistener this.text.getdata digitverifylist...