基于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 globalStorage类代码
Jun 04 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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中遍历stdclass object的实现代码
2011/06/09 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
浅析PHP文件下载原理
2014/12/25 PHP
培养自己的php编码规范
2015/09/28 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
vue-router单页面路由
2017/06/17 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python MD5加密实例详解
2017/08/02 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python高并发和多线程有什么关系
2020/11/14 Python
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
高三学习决心书
2014/03/11 职场文书
经典公益广告词
2014/03/13 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
nginx中proxy_pass各种用法详解
2021/11/07 Servers