jQuery制作input提示内容(兼容IE8以上)


Posted in jQuery onJuly 05, 2017

我们都知道HTML5的input新属性有 placeholder="",那么这个不兼容IE低版本我们只能用脚本来写了。

首先HTML新建一个input

<input type="text" class="input" value="请输入搜索内容" />

然后我们再引入相应的js库,再使用jQuery

<script src="js/jquery-1.8.3.min.js"></script>
  <script>
    $(".input").bind({
      focus:function(){ 
        if (this.value == this.defaultValue){ 
          this.value=""; 
        } 
      }, 
      blur:function(){ 
        if (this.value == ""){ 
          this.value = this.defaultValue; 
        } 
      } 
    });
  </script>

简单吧,这样就可以了,那么这个是input的属性是text,我们要密码password也一样可以显示IE低版本,我们用的方法就是用两个input,一个text默认显示,一个password默认隐藏,当text获取焦点时password显示,text隐藏,没有输入内容失去焦点text显示,password显示,好了,废话不多说,看代码!

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>密码框提示</title>
</head>
<body>
  
  <input type="text" value="登录密码" class="show" >
  <input type="password" class="log_paw" style="display: none;">
  
  
  <script src="js/jquery-1.8.3.min.js"></script>
  <script>
    $('.show').focus(function(){
      var text_value = $(this).val();
      if (text_value == this.defaultValue) {
        $(this).hide();
        $(this).next('input.log_paw').show().focus();
      }
    });
    $('input.log_paw').blur(function() {
      var text_value = $(this).val();
      if (text_value == '') {
        $(this).prev('.show').show();
        $(this).hide();
      }
    });
  </script>
</body>
</html>

好了,代码就在这里了,希望能帮助到你!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 #jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 #jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 #jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
You might like
oracle资料库函式库
2006/10/09 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python压包的概念及实例详解
2021/02/17 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
自荐信范文
2013/12/10 职场文书
教师现实表现材料
2014/02/14 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
初二学习计划书范文
2014/04/27 职场文书
物业管理专业自荐信
2014/07/01 职场文书
学校清明节活动总结
2014/07/04 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年服务员工作总结
2014/11/18 职场文书
写景作文评语集锦
2014/12/25 职场文书
机关保密工作承诺书
2015/05/04 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书