js實現Element中input組件的部分功能並封裝成組件(實例代碼)
現在實現的有基礎用法、可清空、密碼框,參考鏈接:https://element.eleme.cn/#/zh-CN/component/input
HTML代碼:想要測試哪個組件,直接將對應組件解開註釋即可,標紅的js和css記得修改成你自己的位置。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js實現可清空input組件</title> <script src="../js/input/jsInput.js"></script> <link rel="stylesheet" type="text/css" href="../css/jsInput.css"/> </head> <body> <script> //普通input輸入框 document.write(createElementInput()) //添加可清空功能clearable //document.write(createElementInput("clearable")) //實現密碼框show-password //document.write(createElementInput("show-password")) </script> </body> </html>
JS代碼:
function createElementInput(str){ var temp = str; var html = "<div id='my_input_div' onmouseover='addClearNode(\""+str+"\")'' onmouseout='hiddenClearNode(\""+str+"\")''>"; html += "<input id='my_input' placeholder='請輸入內容'"; if(str){ if(str == 'show-password'){ html+=" type = 'password' "; } } html += "oninput='addClearNode(\""+str+"\")'"; html += "onclick='changeColor(\""+str+"\")'"; html += "onblur='hiddenClearNode(\""+str+"\")'/>"; if(str){ html += "<input id='"+str+"' onmousedown='changeValue(\""+str+"\")'/>"; } html += "</div>" 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中input組件的部分功能(慢慢完善)並封裝成組件的文章就介紹到這瞭,更多相關js實現input組件功能內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!