基于JS实现html中placeholder属性提示文字效果示例
作者：包子源 发布时间：2023-09-07 22:50:58
标签：JS,placeholder
本文实例讲述了基于JS实现html中placeholder属性提示文字效果。分享给大家供大家参考，具体如下：
如何通过js实现html的placeholder属性效果呢
我们需要这样做：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.aspxhome.com JS实现placeholder属性效果</title>
<script>
function bl(){
var a=document.getElementById("inpt");
if(a.value.length<=0){
a.style.color="#999999";
a.value="请输入姓名";
}
}
function fo(){
var a=document.getElementById("inpt");
if(a.value=="请输入姓名"){
a.style.color="black";
a.value="";
}
}
</script>
</head>
<body>
<input style="color: #999999;" value="请输入姓名" id="inpt" type="text" onblur="bl()" onfocus="fo()" />
</body>
</html>
运行效果如下：
补充：
这里再为大家补充一个jQuery实现的placeholder属性效果示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.aspxhome.com jQuery实现placeholder属性效果</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<input style="color: #999999;" data-value="请输入姓名" id="inpt" type="text"/>
<script>
function placeHolder(event){
var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val();
if(selfDataValue){
event.type == "click" ? (selfValue == selfDataValue && (self.val("").css("color","#333"))) : (event.type == "blur" && (selfValue == "" && (self.val(selfDataValue).css("color","#A9A9A9"))))
}else{
return false;
}
}
$("#inpt").on("click blur",placeHolder);
</script>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
来源：https://blog.csdn.net/ziwoods/article/details/49815847
0
投稿猜你喜欢
非常好的边框样式设置工具,使用该工具您可以很方便的为DIV设置简单的边框样式，如果放在DW中会更好。会制作DW插件的高手，请帮忙制作成DW插- 无论是在小得可怜的免费数据库空间或是大型电子商务网站，合理的设计表结构、充分利用空间是十分必要的。这就要求我们对数据库系统的常用数据类型有充
- 错误类型： Microsoft JET Database Engine (0x80040E10) 至少一个参数没有被指定值。 原因：在写SQ
- Doug Bowman，Google的Visual Design Lead离职了，一封带有感 * 彩的离职信惹发了大家不少的讨论。甚至还有人用
- 1.func Copy(dst Writer, src Reader) (written int64, err error)这个函数是从一个
- 下面基础的解释一下这错误： 1：本质上的错误： object a;//a是Null对象 protected void Page_Load(o
- 8. 使用DECODE函数来减少处理时间使用DECODE函数可以避免重复扫描相同记录或重复连接相同的表. 例如: SELECT COUNT(
- 我的机器不知为何，安装MySQL的时候，一到配置那一步就无休止的等待，只好结束任务，然而启动MySQL的时候出现1067错误提示
- 今天，在项目中遇到一个问题，两个js页面要共享一个就js对象。js全局变量和静态变量都不行，其他苦逼的小农们就不要去强求了。而LZ又不想用c
- 在昨天的文章，《 block 和 inline 的区别是？》里，我给大家留了个问题——LI 元素到底是block level 的，还是 in
- 1005：创建表失败1006：创建数据库失败1007：数据库已存在，创建数据库失败1008：数据库不存在，删除数据库失败1009：不能删除数
- 本文主要跟大家介绍了Golang巧用defer进行错误处理的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：问题引入毫无疑问，错误处
- 一：命名空间里的namespace关键字和__NAMESPACE__常量的运用PHP支持两种抽象的访问当前命名空间内部元素的方法，__NAM
- 代理服务是一种复杂的技术，具有很多可配置的移动组件。详细信息如下：信息信息是指在服务代理应用程序中调用的基本信息单元。对于服务代理来说，信息
- 有时我们不希望某个类天生就非常庞大，一次性包含许多职责。那么我们就可以使用装饰着模式。 装饰着模式可以动态地给某个对象添加一些额外的职责，从
- 一、获取二叉树的深度就是二叉树最后的层次，如下图：实现代码：def getheight(self): &n
- 查询效率分析：子查询为确保消除重复值，必须为外部查询的每个结果都处理嵌套查询。在这种情况下可以考虑用联接查询来取代。如果要用子查询，那就用E
- 一、简化代码采用更为简短的写法，不仅可以减少输入的字符数，还可以减少文件大小。大部分采用简单写法的代码，执行效率都有轻微提高。1.1&nbs
- 关于跨域这个话题，很早就答应过要分享，但是因为懒，一直拖着，直到D2上有人谈起了“完美跨域”。“跨域”应该已经算不上什么难题了，只是提起“完
- 前言：数据库是大多数 Web 应用的基础设施，只要想把数据存储下来，就离不开数据库，下面将一起学习一下如何给 Flask 应用添加数据库支持
