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"
}
|