基于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 相关文章推荐
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
NW.js 简介与使用方法
Feb 01 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
详解vuex状态管理模式
Nov 01 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
yii实现级联下拉菜单的方法
2014/07/31 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
jquery 使用简明教程
2014/03/05 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
JS实现留言板功能
2017/06/17 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
vue webuploader 文件上传组件开发
2017/09/23 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
详解Python Socket网络编程
2016/01/05 Python
对Django中内置的User模型实例详解
2019/08/16 Python
python文件操作的简单方法总结
2019/11/07 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
关于Java finally的面试题
2016/04/27 面试题
5.12护士节演讲稿
2014/04/30 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
督导岗位职责范本
2015/04/10 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL