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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
PHP 常见郁闷问题答解
2006/11/25 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
python threading模块操作多线程介绍
2015/04/08 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python中psutil的介绍与用法
2019/05/02 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
优秀生推荐信范文
2013/11/28 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
综治维稳工作汇报
2014/10/27 职场文书
教师辞职信范文
2015/02/28 职场文书
初中语文教学随笔
2015/08/15 职场文书
Python函数对象与闭包函数
2022/04/13 Python