广告
返回顶部
首页 > 资讯 > 前端开发 > 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://www.lsjlt.com/news/67009.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery中如何制作input提示内容
    这篇文章主要介绍jQuery中如何制作input提示内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!我们都知道HTML5的input新属性有 placeholder="&...
    99+
    2022-10-19
  • 如何用jquery制作一个带是否的提示框
    今天小编给大家分享一下如何用jquery制作一个带是否的提示框的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、概述在很多网...
    99+
    2023-07-05
  • 如何将input框中输入内容显示在相应的div上
    这篇文章主要为大家展示了“如何将input框中输入内容显示在相应的div上”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何将input框中输入内容显示在相应的...
    99+
    2022-10-19
  • 如何禁用IE提示只显示安全内容
    这篇文章主要介绍了如何禁用IE提示只显示安全内容,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。点击打开IE浏览器,然后点击右上角的设置按钮,点击打开“Internet选项”设...
    99+
    2023-06-28
  • jquery如何替换文本中的内容
    本篇内容介绍了“jquery如何替换文本中的内容”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • html中如何实现input文本框内容自动垂直居中并默认提示文字单击为空
    这篇文章给大家分享的是有关html中如何实现input文本框内容自动垂直居中并默认提示文字单击为空的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。本效果有三个功能: 1、内容自动垂...
    99+
    2022-10-19
  • jquery如何得到元素中id的内容
    本文小编为大家详细介绍“jquery如何得到元素中id的内容”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何得到元素中id的内容”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学...
    99+
    2022-10-19
  • jQuery中如何使用tip提示插件
    小编给大家分享一下jQuery中如何使用tip提示插件,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!效果图:代码如下:<!DOCTYPE html> <html...
    99+
    2022-10-19
  • 如何使用CSS中的visibility属性控制内容显示
    小编给大家分享一下如何使用CSS中的visibility属性控制内容显示,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!CSS使用visibility属性控制内容显示什么是CSS的visib...
    99+
    2022-10-19
  • jquery如何替换a标签中间的内容
    这篇文章主要介绍jquery如何替换a标签中间的内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! jquery替换a标签中间内容的方法:1、利用“$(a...
    99+
    2022-10-19
  • ubuntu中如何显示文件内容
    ubuntu中显示文件内容的方法:1、打开ubuntu终端;2、在命令行中输入“cat 文件名”命令的方式打开指定文件并显示文件内容即可。具体操作方法如下:在ubuntu系统桌面中使用快捷键【Ctrl+Alt+T】打开ubuntu终端命令行...
    99+
    2022-10-25
  • 如何关闭云服务器功能提示信息内容显示
    关闭 AWS Lambda AWS Lambda是 Amazon S3 的一个特殊功能,可以在 AWS 云上执行多个 API,以简化应用程序之间的交互。AWS Lambda 是通过在 AWS 上使用 Amazon Lambda API...
    99+
    2023-10-27
    信息内容 提示 功能
  • 如何关闭云服务器功能提示信息内容
    如果您想关闭云服务器功能提示信息,以下是一些步骤: 确认您已经配置了云服务器功能。 确认云服务器支持的选项。如果您使用公共云或私有云,确保您已经使用了云服务器提供商的可用选项清单。 确认您正在使用的数据中心名称和位置。如果您使用的数据中...
    99+
    2023-10-27
    信息内容 提示 功能
  • vb中数组内容如何显示出来
    在VB中,可以使用For Each循环来遍历数组并显示其内容。以下是一个示例:```vbDim arr() As Integer =...
    99+
    2023-09-15
    vb
  • jquery如何实现在加载完iframe的内容后再进行操作
    为iframe添加onload事件 ie使用attachEvent("onload",function(){}) firefox、chrome使用addEventListener("...
    99+
    2022-11-15
    jquery 加载完iframe
  • html中如何使用jquery操作div的显示
    这篇文章主要为大家展示了“html中如何使用jquery操作div的显示”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html中如何使用jquery操作div的...
    99+
    2022-10-19
  • 如何通过CSS禁用页面内容选中和复制操作
    本篇内容主要讲解“如何通过CSS禁用页面内容选中和复制操作”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何通过CSS禁用页面内容选中和复制操作”吧! ...
    99+
    2022-10-19
  • 如何在Python中提取字符串的内容
    今天就跟大家聊聊有关如何在Python中提取字符串的内容,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Python主要用来做什么Python主要应用于:1、Web开发;2、数据科学研...
    99+
    2023-06-15
  • html中的table表格标签内容如何居中显示
    小编给大家分享一下html中的table表格标签内容如何居中显示,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   首先我们先...
    99+
    2022-10-19
  • 如何限制div高度当内容多了溢出时显示滚动条
    本篇内容介绍了“如何限制div高度当内容多了溢出时显示滚动条”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作