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


Posted in Javascript onJuly 28, 2016

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

效果图

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

细节

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
vue store之状态管理模式的详细介绍
Jun 13 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
jQuery stop()用法实例详解
Jul 28 #Javascript
AngularJS中的表单简单入门
Jul 28 #Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 #Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 #Javascript
AngularJS 模块详解及简单实例
Jul 28 #Javascript
jQuery制作网页版选项卡
Jul 28 #Javascript
AngularJS 中的事件详解
Jul 28 #Javascript
You might like
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
PHP多例模式介绍
2013/06/24 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
php实现的农历算法实例
2015/08/11 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
JS隐藏参数post传值实例
2013/04/18 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
jQuery功能函数详解
2015/02/01 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
vue多次循环操作示例
2019/02/08 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Python Paramiko模块的使用实际案例
2018/02/01 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python os库常用操作代码汇总
2020/11/03 Python
建筑系毕业生自我鉴定
2014/01/24 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
民主生活会主持词
2015/07/01 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python