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


Posted in Javascript onApril 19, 2018

本文实例讲述了基于JS实现html中placeholder属性提示文字效果。分享给大家供大家参考,具体如下:

如何通过js实现html的placeholder属性效果呢

我们需要这样做:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3water.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>

运行效果如下:

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

补充:

这里再为大家补充一个jQuery实现的placeholder属性效果示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3water.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程序设计有所帮助。

Javascript 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 #Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 #Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 #Javascript
详解react-redux插件入门
Apr 19 #Javascript
vuex state及mapState的基础用法详解
Apr 19 #Javascript
使用vuex的state状态对象的5种方式
Apr 19 #Javascript
react redux入门示例
Apr 19 #Javascript
You might like
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
使用php计算排列组合的方法
2013/11/13 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
python字典序问题实例
2014/09/26 Python
Python中的类与对象之描述符详解
2015/03/27 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python 阶乘累加和的实例
2019/02/01 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
黄河的主人教学反思
2014/02/07 职场文书
法人授权委托书
2014/04/03 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
谢师宴邀请函
2015/02/02 职场文书
首次购房证明
2015/06/19 职场文书
名人传读书笔记
2015/06/26 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL