基于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


猜你喜欢
- 1. Scrapy简介Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架。 可以应用在包括数据挖掘,信息处理或存储历史数据等
- 一、安装mysqlclient网上看到很过通过命令:pip install mysqlclient 进行安装的教程,但是我却始终安装失败,遇
- 用python加“验证码”为关键词在baidu里搜一下,可以找到很多关于验证码识别的文章。我大体看了一下,主要方法有几类:一类是通过对图片进
- 购物车的设计目标 从程序员的观点来看,购物车是维护购物者商品选购、允许察看、允许修改的一个对象。购物车本身是一个非常简单的程序,但开发者要考
- 1、需求用户输入当前目录下任意文件名,程序完成对该文件的备份功能。备份文件名为xx[备份]后缀,例如:test[备份].txt。2、步骤接收
- 前言Typora是一款非常使用的笔记工具,对于程序员非常友好,在2021年11月23日,Typora 正式发布 1.0 版本,进入了付费时代
- def get_seed_data(filename):dom = minidom.parse(filename)root = dom.do
- 1.新建site-packages目录,进入到site-packages目录下;2.在site-packages目录下执行pip freez
- 1、如何使用描述符对实例属性做类型检查?实际案例:在某项目中,我们实现了一些类,并希望能像静态类型语言那样(C,C++,Java)对它们的实
- 下面两个函数的使用和FIND_IN_SET一样,使用时只需要把FIND_IN_SET换成FIND_PART_IN_SET或FIND_ALL_
- 前言:存储引擎是数据库的核心,对于 MySQL 来说,存储引擎是以插件的形式运行的。虽然 MySQL 支持种类繁多的存储引擎,但最常用的当属
- 锁有两种分类方法。(1) 从数据库系统的角度来看锁分为以下三种类型: •独占锁(Exclusive Lock)独占锁锁定的资源只允许进行锁定
- 由于pygame.movie.Movie.play() 只支持MPEG格式的视频,且 pygame版本大于1.9.5好像已经不支持这个模块了
- 1. 首先VC++的DLL的导出函数定义成标准C的导出函数: #ifdef LRDLLTEST_EXPORTS #define LRDLLT
- 目录元组1.什么是元组tuple2.元组tuple支持什么数据类型3.元组tuple的基本特征4.如何声明一个元组tuple5.玩转元组tu
- 1、编写注意(1)给函数指定描述名。(2)函数名称只包括小写字母和下划线。(3)每一个函数都应该包含简要说明其功能的注释,注释应该紧跟在函数
- SQL Server 2008的一些新特点及独到之处:设置和安装SQL Server 2008的设置和安装也有所改进。配置数据和引擎位已经分
- 逻辑门是任何数字电路的基本构建块。它需要一两个输入并根据这些输入产生输出。输出可能为高 (1) 或低 (0)。逻辑门使用二极管或晶体管实现。
- 一、数据地址实体抽取的目的及问题对数据的地址进行实体识别,主要作用是确定我们的数据主体最终可以归到哪一行政单位,从而在各行政单位上对数据主体
- asp自定义错误显示方法:<html><head><meta http-equiv="Co