基于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 相关文章推荐
jquery 图片上传按比例预览插件集合
May 28 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
js实现淘宝首页的banner栏效果
Nov 26 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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
python入门前的第一课 python怎样入门
2018/03/06 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
Python 实现微信自动回复的方法
2020/09/11 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
硕士研究生求职自荐信范文
2014/03/11 职场文书
基层党员对照检查材料
2014/08/25 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Python基本知识点总结
2022/04/07 Python