脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → jquery输入框提示语句

jquery实用技巧之输入框提示语句

 更新时间：2016年07月28日 10:24:41   作者：Marksinoberg  
输入有效信息时会有一些提示语，比如“请输入用户名”和“请输入密码”等语言，这篇文章就为大家介绍js实用技巧之输入框提示语句的实现方法，感兴趣的小伙伴们可以参考一下

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

效果图

细节

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

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

实现的代码如下：

$("#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">的实现！

<!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”);将当前对象（也就是获取鼠标焦点的输入框）的属性值进行动态的改变。达到输入数据的时候以密码框的形式出现。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • webpack4 CSS Tree Shaking的使用

    webpack4 CSS Tree Shaking的使用

    这篇文章主要介绍了webpack4 CSS Tree Shaking的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • javascript开发实现贪吃蛇游戏

    javascript开发实现贪吃蛇游戏

    这篇文章主要为大家详细介绍了javascript开发实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JavaScript实现256色转灰度图

    JavaScript实现256色转灰度图

    本文主要介绍了JavaScript实现256色转灰度图的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 浅析微信小程序modal弹窗关闭默认会执行cancel问题

    浅析微信小程序modal弹窗关闭默认会执行cancel问题

    这篇文章主要介绍了小程序modal弹窗关闭默认会执行cancel方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • JavaScript 中的运算符和表达式介绍(二)

    JavaScript 中的运算符和表达式介绍(二)

    这篇文章主要介绍了JavaScript 中的运算符和表达式介绍，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • js 博客内容进度插件详解

    js 博客内容进度插件详解

    本篇文章主要介绍了博客内容进度插件的实现方法，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • js仿搜狐视频记录片列表展示效果

    js仿搜狐视频记录片列表展示效果

    这篇文章主要为大家详细介绍了js仿搜狐视频记录片列表展示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Webpack4 使用Babel处理ES6语法的方法示例

    Webpack4 使用Babel处理ES6语法的方法示例

    这篇文章主要介绍了Webpack4 使用Babel处理ES6语法的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • JavaScript使用HTML5的window.postMessage实现跨域通信例子

    JavaScript使用HTML5的window.postMessage实现跨域通信例子

    这篇文章主要介绍了JavaScript使用HTML5的window.postMessage实现跨域通信例子,需要的朋友可以参考下
    2014-04-04
  • 利用JS实现简单的日期选择插件

    利用JS实现简单的日期选择插件

    这篇文章主要介绍了利用JS实现简单的日期选择插件，文中实现两种效果的日期选择，一种是默认参数，点击日期后直接选择该日期，另一种是显示按钮来设置时间，有需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-01-01

最新评论