输入框提示信息以及显隐效果
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>2.11节,显示输入提示，获取焦点提示取消</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2>显示输入提示，获取焦点提示取消</h2>
<input type="text" name="info" placeholder="html5提示信息" />
<input id='hintInput' placeholder='我是提示信息' type='password' value=''>
<script type="text/javascript">
window.onload = function(){
var setCss = function(_this, cssOption){//设置样式
if ( !_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style ) {
return;
}
for(var cs in cssOption){
_this.style[cs] = cssOption[cs];
}
return _this;
},
hintInput = document.getElementById("hintInput"),
_span = document.createElement("span"),
dataHint = hintInput.getAttribute("data-hint");
_span.innerText = dataHint;
setCss(_span, {
"position":"absolute",
"left":hintInput.offsetLeft+2,
"top":hintInput.offsetTop,
"zIndex":2
});
_span.className = "hintInput";
hintInput.value = "";
_span.setAttribute("id" ,"hint0");
hintInput.parentNode.insertBefore(_span,hintInput);
var onhint = function(e){//隐藏元素
setCss(_span, {
"display":"none"
})
hintInput.focus();
}
hintInput.onblur = function(e){//失去焦点显示元素
if(!hintInput.value.replace( /^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" )){
setCss(_span, {
"display":"block"
})
}
}
_span.onclick = hintInput.onfocus = onhint;//单击事件与获取焦点事件使用同一个函数处理
};
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通