返回顶部
首页 > 资讯 > 前端开发 > VUE >jQuery中如何制作input提示内容
  • 512
分享到

jQuery中如何制作input提示内容

2024-04-02 19:04:59 512人浏览 泡泡鱼
摘要

这篇文章主要介绍Jquery中如何制作input提示内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!我们都知道HTML5的input新属性有 placeholder="&

这篇文章主要介绍Jquery中如何制作input提示内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

我们都知道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" >
  
  
  <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中如何制作input提示内容”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: jQuery中如何制作input提示内容

本文链接: https://lsjlt.com/news/67009.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jQuery中如何制作input提示内容
    这篇文章主要介绍jQuery中如何制作input提示内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!我们都知道HTML5的input新属性有 placeholder="&...
    99+
    2024-04-02
  • 如何用jquery制作一个带是否的提示框
    今天小编给大家分享一下如何用jquery制作一个带是否的提示框的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、概述在很多网...
    99+
    2023-07-05
  • jQuery如何设置内容
    这篇文章将为大家详细讲解有关jQuery如何设置内容,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。设置内容 - text()、html() 以及 val()设置内容方法t...
    99+
    2024-04-02
  • jQuery如何获得内容
    小编给大家分享一下jQuery如何获得内容,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!获得内容 - text()、html()...
    99+
    2024-04-02
  • 如何将input框中输入内容显示在相应的div上
    这篇文章主要为大家展示了“如何将input框中输入内容显示在相应的div上”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何将input框中输入内容显示在相应的...
    99+
    2024-04-02
  • jquery中怎么操作元素内容
    本篇内容介绍了“jquery中怎么操作元素内容”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!jquery中用于操作元素内容的方法有html(...
    99+
    2023-07-05
  • 如何禁用IE提示只显示安全内容
    这篇文章主要介绍了如何禁用IE提示只显示安全内容,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。点击打开IE浏览器,然后点击右上角的设置按钮,点击打开“Internet选项”设...
    99+
    2023-06-28
  • jquery如何改变td内容
    本篇内容主要讲解“jquery如何改变td内容”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery如何改变td内容”吧! jq...
    99+
    2024-04-02
  • jquery如何改变h3内容
    这篇文章主要介绍“jquery如何改变h3内容”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery如何改变h3内容”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • jquery如何修改a内容
    这篇文章主要为大家展示了“jquery如何修改a内容”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery如何修改a内容”这篇文章吧。 ...
    99+
    2024-04-02
  • jquery如何替换div内容
    这篇文章给大家分享的是有关jquery如何替换div内容的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 在jquery中,可以使用html()方法来替...
    99+
    2024-04-02
  • jquery如何替换html内容
    小编给大家分享一下jquery如何替换html内容,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法:1、用replaceWith()把被选元素替换为新的内容,语...
    99+
    2023-06-15
  • jQuery如何设置HTML内容?
    这篇文章将为大家详细讲解有关jQuery如何设置HTML内容?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery 设置 HTML 内容 简介 jQuery 提供了多种内置方法来轻松操作和修改网页中...
    99+
    2024-04-02
  • jQuery如何获取HTML内容?
    这篇文章将为大家详细讲解有关jQuery如何获取HTML内容?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery 获取 HTML 内容 jQuery 提供了多种方法来获取 HTML 内容,包括: ...
    99+
    2024-04-02
  • jquery如何替换文本中的内容
    本篇内容介绍了“jquery如何替换文本中的内容”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • html中如何实现input文本框内容自动垂直居中并默认提示文字单击为空
    这篇文章给大家分享的是有关html中如何实现input文本框内容自动垂直居中并默认提示文字单击为空的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。本效果有三个功能: 1、内容自动垂...
    99+
    2024-04-02
  • jquery如何得到元素中id的内容
    本文小编为大家详细介绍“jquery如何得到元素中id的内容”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何得到元素中id的内容”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学...
    99+
    2024-04-02
  • jquery如何给div增加内容
    这篇文章将为大家详细讲解有关jquery如何给div增加内容,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 jquery给div增加内容的方法...
    99+
    2024-04-02
  • jquery如何去除元素内容
    这篇文章主要讲解了“jquery如何去除元素内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何去除元素内容”吧! ...
    99+
    2024-04-02
  • jquery如何去除ul里内容
    这篇文章主要介绍“jquery如何去除ul里内容”,在日常操作中,相信很多人在jquery如何去除ul里内容问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery如何去除...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作