基于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使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
js生成随机数的方法实例
Oct 16 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
vue实现循环滚动列表
Jun 30 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 utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
python中bisect模块用法实例
2014/09/25 Python
Python魔术方法详解
2015/02/14 Python
Python3中详解fabfile的编写
2018/06/24 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
装饰活动策划方案
2014/02/11 职场文书
运动会方阵解说词
2014/02/12 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
保送生自荐信
2015/03/06 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Nginx 匹配方式
2022/05/15 Servers
Android实现图片九宫格
2022/06/28 Java/Android