基础版,实现了部分功能,输入框选中高亮、输入值出现可清空按钮、input丢失焦点则隐藏可清空按钮以及选中边框不再高亮、点击清空按钮按钮隐藏以及input中的值清空
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现input,选中高亮、输入值之后可清空、移除鼠标清空按钮隐藏、选中高亮移除</title>
</head>
<body>
<div id="app">
<div id="my_input_div" style="width: 140px;border: 1px solid silver;border-radius: 4px;">
<input id="my_input" placeholder='请输入内容' oninput="addNode()" onclick="changeColor()"
style='height: 30px;width:100px;margin-left: 6px;border: none;outline: none;cursor: pointer;'/>
<input id="my_button" value="清空"
style="height: 30px;width: 25px;text-align: center;visibility:
hidden;border: none;outline: none;color: #409eff;cursor: pointer;" onclick="clearValue()"
/>
</div>
</div>
<script>
function changeColor(){
document.getElementById("my_input_div").style.outline="thin outset #409eff";
}
//应该输入内容之后使用该事件
function addNode(){
//将button设置为可见
document.getElementById("my_button").style.visibility = 'visible'
//选中后div添加选中样式 高亮显示
document.getElementById("my_input_div").style.outline="thin outset #409eff";
}
//清空input的值
function clearValue(){
document.getElementById("my_input").value = "";
document.getElementById("my_button").style.visibility = "hidden";
document.getElementById("my_input_div").style.outline="none"
}
function hiddenNode(){
document.getElementById("my_button").style.visibility="hidden";
document.getElementById("my_input_div").style.outline="none"
}
</script>
</body>
</html>
还需完善的点:清空按钮和input移除按钮事件发生冲突、清除样式还需要调整、div边框选中高亮显示样式需要调整
学到的知识点:
document.getElementById('id')之后获取的是元素对象,也就是element对象
document.createElement('input') 创建元素
document.createElement('input').value = '内容' 创建元素并设置内容
document.createElement('input').type = 'button' 创建元素并设置类型
document.createElement('input').id = 'myId' 创建元素并设置id(class也可以这样设置)
document.getElementById('id').appendChilden(document.createElement('input')) 在id为id的元素添加一个input的子元素
document.getElementById('myId').nextElementSibling 获取id为myId元素的下一个元素
设置style,将id为myId的元素设置为不可见
document.getElementById('myId').style.visibility = 'hidden'
visibility属性的值
visible:可见
hidden:不可见
collapse:当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
设置选中时不高亮
document.getElementById('myId').style.outline = 'none'
outline属性的值可以有三个,轮廓宽度、轮廓样式、轮廓颜色,绘制元素周围的一条线,位于边框边缘的外围,可起到突出元素被选中的作用,不会占据空间,也不一定是矩形。
Object.style.outline = outline-color outline-style outline-width
outlineWidrh
thin:瘦的
medium:中的
thick:厚的
length:长的
inherit:继承
outlineStyle
none:没有
hidden:隐藏
dotted:点线轮廓
dashed:虚线
solid:实线
double:双线
groove:凹槽
ridge:垄状
inset:嵌入
outset:外凹
outlineColor
color-name:颜色名称
color-rgb:rgp
color-hex:颜色十六进制值
transparent:透明的
border边框的属性。跟outlineColor相同不再追叙
Object.style.border=borderWidth borderStyle borderColor
boder-radius设置边框角度
boder-radius:4px;
动态添加元素,并绑定方法,onclick可以替换想要绑定的方法名,详情可查看下面的粗糙版源码。
document.getElementById('myId').onclick = fuction 方法名(参数) { 具体方法体 }
常用的方法总结,标红的为常用的。
onclick:点击事件
onblur:失去焦点
onfocus:得到焦点
oninput:检测输入
onkeydown:键盘按下
onkeyup:键盘松开
onkeypress:按住键盘
onmousedown:鼠标按下
onmouseup:鼠标松开
onmousecover:鼠标放上去
onmousemove:鼠标移动
onmouseout:移开鼠标
onload:加载
onchange:改变
onsubmit:提交表单
附加第一版粗糙版源码,动态添加元素版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现input</title>
</head>
<body>
<div id="app">
<div id="my_input_div" style="width: 140px;border: 1px solid silver;border-radius: 4px;">
<input id="my_input" placeholder='请输入内容' onclick="addNode()" onblur="hiddenNode()"
style='height: 30px;width:100px;margin-left: 6px;border: none;outline: none;'/>
<input id="my_button" type="button" value="*" onclick="clearValue()" style="visibility: hidden;"/>
</div>
</div>
<script>
document.getElementById("app");
//应该输入内容之后使用该事件
function addNode(){
//将button设置为可见
document.getElementById("my_button").style.visibility = 'visible'
document.getElementById("my_input_div").style.outline="thin solid #409eff";
/* var input = document.getElementById("my_input_div");
var spanNode = document.getElementById("my_input").nextElementSibling;
//添加判断 如果已经存在删除按钮 则不再重复添加
if (spanNode == null){
var span = document.createElement('input');
span.type = "button"
span.value = "*"
span.onclick = function removeValue(){
console.log("2")
var myInput = document.getElementById("my_input");
myInput.value = "";
removeNode();
}
input.appendChild(span)
} */
}
function clearValue(){
document.getElementById("my_input").value = "";
document.getElementById("my_button").style.visibility = "hidden";
}
function hiddenNode(){
document.getElementById("my_button").style.visibility="hidden";
}
/* function removeNode(){
console.log("1")
var spanNode = document.getElementById("my_input").nextElementSibling;
spanNode.style.visibility = 'hidden';
//spanNode.remove();
} */
</script>
</body>
</html>