JavaScript实现的文本框placeholder提示文字功能示例
更新时间：2018年07月25日 11:57:56 作者：筱葭
这篇文章主要介绍了JavaScript实现的文本框placeholder提示文字功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了JavaScript实现的文本框placeholder提示文字功能。分享给大家供大家参考，具体如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS文本框placeholder提示</title>
</head>
<body>
<input id="input" type="text" value="请输入关键词">
</body>
<script>
window.onload = function() {
var defaultValue = "请输入关键词";
var input = document.getElementById("input");
input.style.color = "grey";
input.onfocus = function() {
if (this.value == defaultValue) {
input.value="";
setCursorPosition(this, 0);
}
};
input.onblur = function() {
if (this.value == "") {
this.value = defaultValue;
}
};
input.onkeypress = 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();
}
}
</script>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
经典的间隔时间滚动新闻（图片），可控制滚动 其实这个也挺多网站用到的，简单又实用。(2010-05-05
这篇文章主要介绍了js检查是否关闭浏览器的方法,涉及javascript针对窗口事件的判定与操作相关技巧,需要的朋友可以参考下2016-08-08
基于Bootstrap table组件实现多层表头的实例代码
Bootstrap table还有一个很多强大的功能，下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的实例代码，需要的朋友参考下吧2017-09-09
这篇文章主要介绍了js get和post实现代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了js数组对象的includes方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了使用javascript如何生成随机颜色,需要的朋友可以参考下2014-05-05
在Web开发中通过使用JavaScript可以动态地修改HTML元素的属性和样式,下面这篇文章主要给大家介绍了关于JS动态更改div高度实现的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下2023-11-11
小程序的openid相当重要,它是用户的唯一标识id,牵扯的支付,登录,授权等,下面这篇文章主要给大家介绍了关于微信小程序获取用户openid的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了js友好的时间返回函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
本文主要介绍了使用javascript来控制背景图片的显示和隐藏，当点击关闭按钮时，控制CSS使页面不加载背景图，同时记录COOKIE相关参数，并设置cookie的有效期2014-02-02
最新评论