基于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 应用添加数据库支持