我们在编写网页的时候不可避免的会遇到输入框，那么怎么设计输入框才能更加优雅呢？不同的人会有不同的答案，下面分享一个比较不错的设计。

效果图

细节

这个效果主要是通过JQuery来实现，我的思路如下：

输入框获取鼠标焦点之前，显示原标签的value属性值；获取了鼠标焦点之后，如果当前value有值，那就清空，否则恢复；密码框特殊照顾，待会讲。

实现的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
$("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="请输入邮箱地址"){
      $(this).val("");
    }
  });
$("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("请输入邮箱地址")
    }
  });

完整的小例子

完整的代码如下，尤其注意<input type="text" id="password">的实现！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文本输入框中内容的提示效果</title>
  <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
</head>
<body>
<script>
$(function(){
  $("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="请输入邮箱地址"){
      $(this).val("");
    }
  });
  $("#password").focus(function(){
    var password_text = $(this).val();
    if(password_text=="请输入密码"){
      $(this).attr("type","password");
      $(this).val("");
    }
  });
  $("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("请输入邮箱地址")
    }
  });
  $("#password").blur(function(){
    var password_value = $(this).val();
    if(password_value==""){
      $(this).attr("type","text");
      $(this).val("请输入密码")
    }
  });
});
</script>
<div align="center">
  <input type="text" id ="address" value="请输入邮箱地址"><br><br>
  <input type="text" id ="password" value="请输入密码"><br><br>
  <input type="button" name="登录" value="登陆">
</div>
</body>
</html>

$(function(){});其就是$(document).ready(function(){});的缩写。这个倒不是什么重点。

$(this).attr(“type”,”password”);将当前对象（也就是获取鼠标焦点的输入框）的属性值进行动态的改变。达到输入数据的时候以密码框的形式出现。

jquery实用技巧之输入框提示语句的更多相关文章

  1. JQuery实用技巧--学会你也是大神(1)——插件的制作技巧

      前  言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...

  2. JQuery实用技巧

    1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...

  3. jQuery实用技巧必备

    本文实例总结了经典且实用的jQuery代码开发技巧.分享给大家供大家参考.具体如下: 1. 禁止右键点击 $(document).ready(function(){  $(document).bind ...

  4. jQuery Label Better – 友好的表单输入框提示插件

    jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...

  5. iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示

    iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示 本文介绍其简单使用: 第一步:在本地建立一个访问的服务端.  打开本地终端,在本地新建一个文件夹,在该文件夹中存放测试的html页面.   ...

  6. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  7. .NET Core实用技巧（一）如何将EF Core生成的SQL语句显示在控制台中

    目录 .NET Core实用技巧(一)如何将EF Core生成的SQL语句显示在控制台中 前言 笔者最近在开发和维护一个.NET Core项目,其中使用几个非常有意思的.NET Core相关的扩展,在 ...

  8. jQuery常用技巧-使用的总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...

  9. jQuery常用技巧

      1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用 ...

随机推荐

  1. python爬虫专栏学习

    知乎的一个讲python的专栏,其中爬虫的几篇文章,偏入门解释,快速看了一遍. 入门 爬虫基本原理:用最简单的代码抓取最基础的网页,展现爬虫的最基本思想,让读者知道爬虫其实是一件非常简单的事情. 爬虫 ...

  2. unity3d vscode

    原来unity3d里assets store有一个插件,下载就行了,插件名就叫vscode 下载完了之后,preference里就会出现,vscode,Enable Integration 这一项勾上 ...

  3. oracle 中的exists 和 in 效率问题

    oracle中的 exists 和 in 的效率问题 --------------------------------------------------------------- +++++++++ ...

  4. python -ConfigParser模块讲解

    configParser 模块用于操作配置文件 注:Parser汉译为“解析”之意. 配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键= ...

  5. MySQL prompt提示符总结

      A counter that increments for each statement you issue \D 当前日期 \d 当前数据库 \h 数据库主机 \l The current de ...

  6. Robot Framework常用关键字介绍

    常用关键字介绍 在学习一门编程语言的时候,大多教材都是从打印“hello world”开始.我们可以像编程语言一样来学习 Robot Framework.虽然通过 RIDE 提供“填表”一样的写测试用 ...

  7. 利用git工具命令简单的从github上拷贝和上传代码

    第一:从github上拷贝项目到本地   1.在github上建立一个项目名为:MygitTest 2.在我们本地电脑上把这个项目拷贝下来:直接选择一个文件夹,右键选择git Bash here 直接 ...

  8. 使用 Qt 获取 UDP 数据并显示成图片

    一个项目,要接收 UDP 数据包,解析并获取其中的数据,主要根据解析出来的行号和序号将数据拼接起来,然后将拼接起来的数据(最重要的数据是 R.G.B 三个通道的像素值)显示在窗口中.考虑到每秒钟要接收 ...

  9. C#操作Redis Set 无序集合

    /// <summary> /// redis 无序集合 /// </summary> public static void Redis_Set() { RedisClient ...

  10. DIY了一下自己blog的UI

    当年才学前端时就想改自己blog的UI,然鹅当时没看见那个“申请JS权限”,一直以为blog不能随意DIY样式,只改了少许CSS.现在重新看看设置管理选项,简单修改了一下样式(注意:修改样式之前发邮件 ...