基于JS实现html中placeholder属性提示文字效果示例

作者：包子源时间：2023-09-07 22:50:58　

本文实例讲述了基于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

标签：JS,placeholder

投稿

基于JS实现html中placeholder属性提示文字效果示例

猜你喜欢

解决vue脚手架项目打包后路由视图不显示的问题

Python实现绘制多种激活函数曲线详解

python引入导入自定义模块和外部文件的实例

web前端vue之CSS过渡效果示例

SQL Server 数据库索引其索引的小技巧

卓越网的配送服务让我很不满意

Python抓取数据到可视化全流程的实现过程

python的类class定义及其初始化方式

wxPython窗口的继承机制实例分析

Python编程之event对象的用法实例分析

Python安装spark的详细过程

Python django框架输入汉字，数字，字符生成二维码实现详解

python Django框架快速入门教程（后台管理）

python绘制柱形图的方法

ubuntu环境下python虚拟环境的安装过程

MySQL常用命令大全脚本之家总结

优化次数过多的循环

python字典setdefault方法和get方法使用实例

[机器视觉]使用python自动识别验证码详解

Python如何telnet到网络设备