現在實現的有基礎用法、可清空、密碼框，參考鏈接：https://element.eleme.cn/#/zh-CN/component/input

HTML代碼：想要測試哪個組件，直接將對應組件解開注釋即可，標紅的js和css記得修改成你自己的位置。

js實現可清空input組件

//普通input輸入框

document.write(createElementInput())

//添加可清空功能clearable

//document.write(createElementInput("clearable"))

//實現密碼框show-password

//document.write(createElementInput("show-password"))

JS代碼：

function createElementInput(str){

var temp = str;

var html = "

";

html += "

if(str){

if(str == 'show-password'){

html+=" type = 'password' ";

}

}

html += "οninput='addClearNode(\""+str+"\")'";

html += "οnclick='changeColor(\""+str+"\")'";

html += "οnblur='hiddenClearNode(\""+str+"\")'/>";

if(str){

html += "";

}

html += "

"

return html;

}

//box-shadow: 0 0 0 20px pink; 通過添加陰影的方式顯示邊框

function changeColor(str){

//alert(str)

document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff";

//獲取inpu的值

var value = document.getElementById('my_input').value;

var button = document.getElementById(str);

//添加判斷 如果輸入框中有值 則顯示清空按鈕

if(value){

if(button){

button.style.visibility = "visible"

}

}

}

//應該輸入內容之后使用該事件

function addClearNode(str){

var value = document.getElementById('my_input').value;

var button = document.getElementById(str);

//alert(value)

if(value){

if(button){

//將button設置為可見

button.style.visibility = 'visible'

}

}else{

//判斷該屬性是否存在

if(button){

//將button設置為不可見

button.style.visibility = 'hidden'

}

}

//選中后div添加選中樣式 高亮顯示

document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";

}

//改變input中的值

function changeValue(str){

if(str){

if(str == 'clearable'){

clearValues(str);

}else if(str == 'show-password'){

showPassword();

}

}

}

//清空輸入值

function clearValues(str){

document.getElementById("my_input").value = "";

document.getElementById(str).style.visibility = "hidden";

//仍然處于選中狀態 div邊框突出陰影

document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"

}

//隱藏清除按鈕

function hiddenClearNode(str){

var button = document.getElementById(str);

if(button){

button.style.visibility="hidden";

}

//將div陰影設置為0

document.getElementById("my_input_div").style.boxShadow="0 0 0"

}

//顯示密碼

function showPassword(){

var myInput = document.getElementById('my_input');

var password = myInput.value;

var type = myInput.type;

//alert(type)

if(type){

if(type == 'password'){

myInput.type = '';

myInput.value = password;

}else{

myInput.type = 'password';

myInput.value = password;

}

}

//仍然處于選中狀態 div邊框突出陰影

document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"

}

CSS代碼：

#my_input_div{

width: 150px;

border: 1px solid silver;

border-radius: 4px;

position: relative;

}

#my_input{

height: 30px;

width:100px;

margin-left: 6px;

border: none;

outline: none;

cursor: pointer;

}

#clearable{

height: 20px;

width: 15px;

text-align: center;

visibility:hidden;

border: none;

outline: none;

color: #409eff;

cursor: pointer;

background-image: url(../image/clear.svg);

background-repeat: no-repeat;

background-size: 12px;

position: absolute;

top: 10px;

left: 120px;

display: inline-block;

}

#show-password{

height: 20px;

width: 15px;

text-align: center;

visibility:hidden;

border: none;

outline: none;

color: #409eff;

cursor: pointer;

background-image: url(../image/eye.svg);

background-repeat: no-repeat;

background-size: 12px;

position: absolute;

top: 10px;

left: 120px;

display: inline-block;

}

剩下的功能會慢慢被完善......

js實現element中可清空的輸入框(2)

接著上一篇的:js實現element中可清空的輸入框(1)繼續優化,感興趣的可以去看看喲,直通車鏈接:https://www.cnblogs.com/qcq0703/p/14450001.html 實 ...

使用純生js實現圖片輪換

效果圖預覽. //W3C//D ...

使用純生js操作cookie

前段時間做項目的時候要使用js操作cookie,jquery也有相應的插件,不過還是覺得純生的js比較好,畢竟不依賴jq. //獲得coolie 的值 function cookie(name) { ...

element中 input賦值后無法再次輸入值

項目中有個需求,在表格里點擊某條數據彈出窗口進行修改值,當時彈出的是input上進行修改,所以當我點擊數據的時候,先進行回顯原先的數據,再進行修改. 點擊某條數據,彈出窗口,進行后臺請求,將后臺返回的 ...

頭部布局，搜索驗證和AJAX自動搜索提示，并封裝成組件，提高代碼復用性

index.html 頭部區結構和樣式 效果圖 靜態樣式 index.html中的部分

& ...

vue-quill-editor 封裝成組件；圖片文件流上傳；同一頁面多個編輯器樣式異常解決辦法

使用方法: 引入并注冊組件,然后直接使用: @getcode是同步獲取編輯器內容的::contentDefault是編輯器的默認內容: 注意:如果同一個頁面多個編輯器,參數id不能相同,否則只有第一個 ...

解決Echarts封裝成組件時只有最后一個才會縮放的問題

參考了此文,并且強烈建議去看http://blog.csdn.net/crper/article/details/76091755 一般網上的方法都是 mounted() { this.drawCha ...

隨機推薦

【.net 深呼吸】聊聊WCF服務返回XML或JSON格式數據

有時候,為了讓數據可以“跨國經營”,尤其是HTTP Web有關的東東,會將數據內容以 XML 或 JSON 的格式返回,這樣一來,不管客戶端平臺是四大文明古國,還是處于蒙昧時代的原始部落,都可以使用這 ...

psr的規范

基本代碼規范 本篇規范制定了代碼基本元素的相關標準, 以確保共享的PHP代碼間具有較高程度的技術互通性. 關鍵詞 "必須"("MUST")."一定不可 ...

如何編寫高效的jQuery代碼

jQuery的編寫原則: 一.不要過度使用jQuery 1. jQuery速度再快,也無法與原生的javascript方法相比,而且建立的jQuery對象包含的信息量很龐大.所以有原生方法可以使用的場 ...

PHP中調用move_uploaded_file函數提示failed to open stream和 Unable to move

在做一個PHP文件上傳系統的時候,使用move_uploaded_file進行文件上傳,提示下面兩個warning,不能成功上傳文件 Warning: move_uploaded_file(uploa ...

【轉載】Windows自帶.NET Framework版本大全

轉載自:http://blogs.msdn.com/b/astebner/archive/2007/03/14/mailbag-what-version-of-the-net-framework-is ...

輕量級的.Net ORM框架介紹

輕量型 ORM 組件?FluentData 官網https://fluentdata.codeplex.com/ http://www.cnblogs.com/babietongtianta/p/43 ...

db2數據庫中查找數據庫表

模糊查找db2數據庫中的數據庫表: select tabname,remarks from syscat.tables where TABNAME like? 'DM%' select 'DROP T ...

Global.asax 文件說明

引用 來自 ?http://www.cnblogs.com/jianshao810/archive/2011/02/03/1948912.htm 在網上找了N多相關的東西總說的不夠細,現在終于找到了. ...

Tab選項卡的原生寫法

關鍵點:建立點擊事件和顯示事件的連接,即點li 1讓對應的div1出來,很容易想到遍歷.索引 ;;} ul,li{list-style: none;} .tab{background: rgba(2, ...

學習接水系統(java+thread線程)

(一)項目框架分析 對于學生并發接水項目,根據面向對象的思想,需要創建兩個對象,即學生和水龍頭. 接下來主要講解不排隊接水和排隊接水兩張情況. 項目的目錄文件如下: (二)不排隊接水 假設有四個學生小 ...

總結

以上是生活随笔為你收集整理的纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。