这篇文章主要介绍了如何JavaScript项目中实现一个input组件功能，此处通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，需要的朋友可以参考下：
Java的特点有哪些
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组件功能的内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
