当前位置:首页 > jQuery技术文章 > jQuery设置和移除文本框默认值的方法

实例分析jQuery设置和移除文本框默认值的方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:144

这篇文章主要知识点是关于jQuery、设置、移除、文本框、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery Mobile从入门到精通
  • 类型:jQuery大小:168.7 MB格式:PDF作者:未来科技
立即下载

jQuery设置和移除文本框默认值的方法

本文实例讲述了jQuery设置和移除文本框默认值的方法。分享给大家供大家参考。具体分析如下:

开始时,文本框设定一个默认值。当光标移动到文本框时,如果文本框当前值是默认值,那么清空;离开文本框时,文本框值如果为空,那么将文本框值设置为默认值。

代码如下:

$(document).ready(function() {
  //each遍历文本框
  $(".input").each(function() {
    //保存当前文本框的值
    var vdefault = this.value;
    $(this).focus(function() {
      //获得焦点时,如果值为默认值,则设置为空
      if (this.value == vdefault) {
        this.value = "";
      }
    });
    $(this).blur(function() {
      //失去焦点时,如果值为空,则设置为默认值
      if (this.value == "") {
        this.value = vdefault;
      }
    });
  });
});

希望本文所述对大家的jQuery程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

深入理解JS函数stack size计算方法

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.173671

基于jQuery实现自动轮播旋转木马特效

本文实例讲述了jQuery实现自动轮播旋转木马特效。分享给大家供大家参考。具体如下: 这是一款基于jQuery实现自动轮播旋转木马特效代码,实现过程很简单。 运行效果图:-------------------查看效果 下载源码------------------- 简要教程 jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件。该旋转木马将图片进行堆叠,轮流的将图片推送到最前面来展示,形成旋转木马的效果。 使用方法 该jQuery旋转木马插件需要引入jQuery,jquery.carousel.js文件。 script src="js/jquery.min.js"/scriptscript src="js/jquery.carousel.js"/script HTML结构 该jQuery旋转木马插件使用一个div来作为包裹元素,在它里面是一个无序列表,用于放置图片,以及两个作为前后导航按钮的div元素。 div class="caroursel rotator-demo" ul class="rotator-list" li class="rotator-item"img src="image/1.jpg"/li li class="rotator-item"img src……

网友NO.834736

jQuery统计上传文件大小的方法

本文实例讲述了jQuery统计上传文件大小的方法。分享给大家供大家参考。具体如下: 对于现代浏览器(支持html5)来说,在客户端统计上传文件的大小,可以通过$(selector)[0].files[0].size来实现。但在老版本的IE浏览器中,比如IE7,IE8或IE9,却不支持这种做法,但可以借助ActiveXObject对象来实现。 复制代码 代码如下: input type="file" name="f" id="f" value="上传文件"/ input type="button" value="获取上传图片的大小" id="g"/ @section scripts { script type="text/javascript" $(function() { $('#g').on("click", function() { getFileSize("f"); }); }); function getFileSize(eleId) { try { var size = 0; if ($.browser.msie) {//ie旧版浏览器 var fileMgr = new ActiveXObject("Scripting.FileSystemObject"); var filePath = $('#' + eleId)[0].value; var fileObj = fileMgr.getFile(filePath); size = fileObj.size; //byte size = size / 1024;//kb //size = size / 1024;//mb } else {//其它浏览器 size = $('#……

网友NO.709249

jquery解决图片路径不存在执行替换路径

$("img").error(function() { $(this).attr("src", "Images/error.jpg"); }); 当图片路径不存在,可以设置为其他有好的图片来显示……

网友NO.573639

jquery mobile实现可折叠的导航按钮

本文实例为大家分享了jquery实现可折叠的导航按钮的具体代码,供大家参考,具体内容如下 功能: 当功能较多时,创建可折叠分组导航按钮。只需指定 data-role=" collapsible "创建可折叠面板 !DOCTYPE html html head meta charset="utf-8" title可折叠的导航面板/title !--使用名为viewport的meta值,其content指定自适应设备的宽度-- meta name="viewport" content="width=device-width, initial-scale=1" link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" script src="http://code.jquery.com/jquery-1.8.3.min.js"/script script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"/script /head body div data-role="page" id="pageone" div data-role="header" h1图书查阅系统/h1 /div !--创建一个可折叠的导航面板-- div data-role="content" div data-role="collapsible" data-theme="e" h4文学历史/h4 ul data-role="listview" lia href="#" rel="external nofollow" r……

网友NO.274244

jquery自动补齐功能插件flexselect用法示例

本文实例讲述了jquery自动补齐功能插件flexselect用法。分享给大家供大家参考,具体如下: 这几天正在做一个东东。需要用到自动补齐的功能。也就是select控件的文本项可以让它写。默认的select文本框是只读的,不能写。在网上找到一个jQuery插件:flexselect可以完成这项功能。 将插件放到项目里。然后在页面中引用这个插件。 script src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/jquery.flexselect.js" type="text/JavaScript"/scriptscript src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/liquidmetal.js" type="text/javascript"/scriptlink href="${pageContext.request.contextPath}/js/jquery.flexselect-0.2/flexselect.css" rel="stylesheet" type="text/css" 然后在js脚本中写入这样的代码: script type="text/javascript"jQuery(document).ready(function(){ $("select[class*=flexselect]").flexselect();});/script 刚开始是这样写的: script type="text……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757