基于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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
Vue 数据响应式相关总结
Jan 28 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
ES6中的Promise代码详解
2017/10/09 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
Python中特殊函数集锦
2015/07/27 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python语音识别实践之百度语音API
2018/08/30 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python中的self用法详解
2019/08/06 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
如何判断计算机可能已经中马
2013/03/22 面试题
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
学习雷锋精神演讲稿
2014/05/10 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
学校政风行风整改方案
2014/10/25 职场文书
代理词怎么写
2015/05/25 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL