基于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玩一玩WSH吧
Feb 23 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
jquery append与appendTo方法比较
May 24 jQuery
fetch 如何实现请求数据
Dec 20 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脚本的10个技巧(7)
2006/10/09 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
党员个人剖析材料2014
2014/10/08 职场文书
工程部文员岗位职责
2015/02/04 职场文书
民事申诉状范本
2015/05/20 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python