這篇文章主要介紹了如何JavaScript項目中實現一個input組件功能,此處通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考價值,需要的朋友可以參考下:
Java的特點有哪些 1.Java語言作為靜態面向對象編程語言的代表,實現了面向對象理論,允許程序員以優雅的思維方式進行復雜的編程。 2.Java具有簡單性、面向對象、分布式、安全性、平臺獨立與可移植性、動態性等特點。 3.使用Java可以編寫桌面應用程序、Web應用程序、分布式系統和嵌入式系統應用程序等。
HTML:
<!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; }
到此這篇關于如何JavaScript項目中實現一個input組件功能的文章就介紹到這了,更多相關如何JavaScript項目中實現一個input組件功能的內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。