本文实例讲述了 实现的文本框placeholder提示文字功能。分享给大家供大家参考，具体如下：
<!doctype html>
<html>
<head>
< http-equiv="Content-Type" content="text/html; charset=utf-8" />
< >www.jb51.net JS文本框placeholder提示</ >
</head>
<body>
<input id="input" type="text" value="请输入关键词">
</body>
< >
window. = function() {
var defaultValue = "请输入关键词";
var input = document.getElementById("input");
input.style.color = "grey";
input. = function() {
if (this.value == defaultValue) {
input.value="";
setCursorPosition(this, 0);
}
};
input. = function() {
if (this.value == "") {
this.value = defaultValue;
}
};
input. = function(e) {
e = e || window.event;
var key = e.charCode || e.keyCode || e.which;
if (this.value == defaultValue) {
this.value = "";
this.style.color = "black";
}
if (this.value.length == 1 && key == 8) {
this.value = defaultValue;
this.style.color = "grey";
setCursorPosition(this, 0);
}
};
};
function setCursorPosition(elem, index) {
if (elem.setSelectionRange) {
elem.focus();
elem.setSelectionRange(index, index);
}
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', index);
range.moveStart('character', index);
range.select();
}
}
</ >
</html>
感兴趣的朋友可以使用在线HTML/CSS/ 代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
更多关于 相关内容感兴趣的读者可查看本站专题：《 页面元素操作技巧总结》、《 操作DOM技巧总结》、《 切换特效与技巧总结》、《 动画特效与技巧汇总》、《 错误与调试技巧总结》、《 数据结构与算法技巧总结》及《 数学运算用法总结》
希望本文所述对大家 程序设计有所帮助。
继续阅读与本文标签相同的文章
上一篇 :
验证不当会导致缓冲区溢出
下一篇 :
顶级域名出现混淆
-
中国芯片研究再获国际顶会最佳论文提名！清华魏少军、刘雷波团队出品
2026-05-15栏目： 教程
-
全网“传奇手游”相关搜索排名TOP100 全网“传奇手游”相关搜索排行榜
2026-05-15栏目： 教程
-
又一国产巨头崛起！19天狂建1367个5G基站，日韩始料不及
2026-05-15栏目： 教程
-
恩平“两线合一”改革试点全面完成家计入户调查，建立数据库
2026-05-15栏目： 教程
-
雷军微博抽奖送的蔚来ES6 10个月后终于兑现
2026-05-15栏目： 教程