文本框输入值文字消失常用的两种方法

1.这种相对来说较简单,举例子:

<input name="textfield" type="text" value="点击添入标题" style="color: gray;" 
onfocus="if (value =='点击添入标题'){value =''}" 
onblur="if (value ==''){value='点击添入标题'}" />

注:onfocus事件在对象获得焦点时发生;onblur 事件会在对象失去焦点时发生。

2.另外一种复杂一些,用jquery,直接贴代码细看:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框输入值文字消失</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){$("#focus .input_txt").each(function(){var thisVal=$(this).val();//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示if(thisVal!=""){$(this).siblings("span").hide();}else{$(this).siblings("span").show();}//聚焦型输入框验证    
                    $(this).focus(function(){$(this).siblings("span").hide();}).blur(function(){var val=$(this).val();if(val!=""){$(this).siblings("span").hide();}else{$(this).siblings("span").show();}    });});$("#keydown .input_txt").each(function(){var thisVal=$(this).val();//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示if(thisVal!=""){$(this).siblings("span").hide();}else{$(this).siblings("span").show();}$(this).keyup(function(){var val=$(this).val();$(this).siblings("span").hide();}).blur(function(){var val=$(this).val();if(val!=""){$(this).siblings("span").hide();}else{$(this).siblings("span").show();}})});});
</script>
<style type="text/css">form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}label{display:block;height:40px;position:relative;margin:20px 0;}span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}.border_radius{border-radius:5px;color:#B00000;}h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
</style>
</head>
<body>
<form class="border_radius" id="focus"><h2>聚焦型提示语消失</h2><label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius"  /></label><label><span>密码</span><input type="text" class="input_txt border_radius" /></label></form><form class="border_radius" id="keydown"><h2>输入型提示语消失</h2><label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius"  /></label><label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
</body>
</html>

 

转载于:https://www.cnblogs.com/anns/p/4727279.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/290642.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言之strstr函数类似Java字符串的contain函数

1、strstr函数介绍 找出haystack字符串在needle字符串中第一次出现的位置&#xff08;不包括needle的串结束符&#xff09;。返回该位置的指针&#xff0c;如找不到&#xff0c;返回空指针。 2、举例 3、运行结果

软件测试技术——软件测试概述

文章目录一、软件测试的定义标准定义Bug和缺陷二、软件测试与软件质量保证三、软件测试七大基本原则四、软件测试分类按测试手段按测试执行方式按测试阶段或层次按测试对象五、软件测试过程模型V模型W模型H模型X模型一、软件测试的定义 正向观点逆向观点验证软件是否能正常工作…

《编写高质量代码:改善c程序代码的125个建议》——建议14-2:在右移中合理地选择0或符号位来填充空出的位...

本节书摘来自华章计算机《编写高质量代码&#xff1a;改善c程序代码的125个建议》一书中的第2章&#xff0c;建议14-2,作者&#xff1a;马 伟 更多章节内容可以访问云栖社区“华章计算机”公众号查看。 建议14-2&#xff1a;在右移中合理地选择0或符号位来填充空出的位 在右移…

Linux-No.04 Linux 设置定时任务发送邮件功能

2019独角兽企业重金招聘Python工程师标准>>> 1、定时任务 crontab -l crontab -e /sbin/service crond start //启动服务/sbin/service crond stop //关闭服务 /sbin/service crond restart //重启服务 /sbin/service crond reload //重新载入配置 /sbin/…

WPF 基础控件之 DataGrid 样式

此群已满340500857 &#xff0c;请加新群458041663由于微信群人数太多入群请添加小编微信号yanjinhuawechat 或 W_Feng_aiQ 邀请入群需备注WPF开发者 PS&#xff1a;有更好的方式欢迎推荐。支持NugetInstall-Package WPFDevelopers.Minimal -Version 3.2.001—代码如下一、创建…

C#页面抓取信息

//根据Url地址得到网页的html源码private string GetWebContent(string Url){string strResult"";try{HttpWebRequest request (HttpWebRequest)WebRequest.Create(Url);//声明一个HttpWebRequest请求request.Timeout 30000;//设置连接超时时间request.Headers.Set…

C语言之unsigned char和uint8_t

1、问题 今天搞openssl里面的客户端和服务端生成的随机数时候&#xff0c;PC端用的uint8_t数据类型&#xff0c;我用的是unsigned char类型&#xff0c;特么这不日了狗&#xff0c;不一样&#xff0c;后来问了pc端的人&#xff0c;和到网上查了下他们的区别 2、解释 unsigned…

电子商务应用课程知识整理 第五章-搜索引擎优化(SEO)

文章目录一、认识SEOSEO概述SEO相关术语SEO黑帽SEO白帽PV&#xff08;Page View&#xff09;跳出率沙盒效应SPAM快照二、SEO常用技术1. 网页title的优化要点&#xff1a;2. 关键词的选取注意的问题&#xff1a;需要避免的问题&#xff1a;3. 元标签关键词的优化要点&#xff1a…

在 Linux 下使用 RAID(二):使用 mdadm 工具创建软件 RAID 0 (条带化)

RAID 即廉价磁盘冗余阵列&#xff0c;其高可用性和可靠性适用于大规模环境中&#xff0c;相比正常使用&#xff0c;数据更需要被保护。RAID 是一些磁盘的集合&#xff0c;是包含一个阵列的逻辑卷。驱动器可以组合起来成为一个阵列或称为&#xff08;组的&#xff09;集合。 创建…

【Maven实用技巧】03. Maven 编译打包时如何忽略测试用例

跳过测试阶段&#xff1a; mvn package -DskipTests 临时性跳过测试代码的编译&#xff1a; mvn package -Dmaven.test.skiptrue maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为&#xff0c;即跳过编译&#xff0c;又跳过测试。 指定测试…

如何使用windbg查看C#某个线程的栈大小 ?

每一个线程都有一个叫 TEB&#xff08;Thread Environment Block&#xff09; 的线程环境块数据结构&#xff0c;这个结构中有一个叫做 NT_TIB 的结构&#xff0c;它里面有两个字段分别为 StackBase 和 StackLimit&#xff0c;前面叫做栈基址,也就是栈顶&#xff0c;后者叫做 栈…

Android之解决ubuntu没有无线网卡和手机wifi实现adb wifi调试

1、问题 ubuntu没有无线网卡&#xff0c;但是在在wifi1是同一个网段&#xff0c;然后手机需要wifi adb调试 2、解决办法 1、连接上wifi1 2、手机下载“终端模拟器apk”安装在手机上 3、手机连接电脑&#xff0c;然后adb tcpip 5555 4、然后adb push dropbearmulti /sdcard…

struts2批量删除

2019独角兽企业重金招聘Python工程师标准>>> 2012-10-27 12:48 997人阅读 评论(0) 收藏 举报 逻辑代码 [java] view plain copy package com.stu2; import java.util.ArrayList; import java.util.List; import java.sql.*; import com.s…

如何使用jquery刷新当前页面

如何使用jquery刷新当前页面 下面介绍全页面刷新方法&#xff1a;有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象&#xff08;用于框架&#xff09; opener.location.reload()刷新父窗口对象&#xff08;用于单开窗口&#xff…

电子商务应用课程知识整理 第六章-数据挖掘

文章目录一、概述二、关联分析概念&#xff1a;关联分析步骤&#xff1a;用于寻找频繁项集的算法算法一&#xff1a;蛮力法算法二&#xff1a;Apriopri算法&#xff08;先验算法&#xff09;三、分类与预测k近邻算法&#xff08;kNN&#xff09;四、聚类分析k均值算法&#xff…

C语言之如何输出uint32_t和uint64_t和16进制

1、输出uint32_t uint32_t a 888;printf("a is %ld", a); 2、输出uint64_t uint64_t b 888;printf("b is %lu", b);printf("b is %lld", b); 3、输出16进制 int c 16;printf("c is 0x%08x", c);

《统计会犯错——如何避免数据分析中的统计陷阱》—第2章置信区间的优势

本节书摘来自异步社区《统计会犯错——如何避免数据分析中的统计陷阱》一书中的第2章置信区间的优势&#xff0c;作者【美】Alex Reinhart&#xff08;亚历克斯莱因哈特&#xff09;,更多章节内容可以访问云栖社区“异步社区”公众号查看。 置信区间的优势与考虑试验结果的显著…

.NET Core 返回结果统一封装

本文使用.NET Core Webapi演示&#xff01;一:新建.NetCore webapi项目为了方便开发,简化代码,也为了与前端方便对接,需要对接口服务返回结果进行统一处理。二:定义返回结果结构我们需要定义一个统一返回结果泛型类ApiResultpublic class ApiResult<T>{/// <summary&g…

第40周一

晚上地铁回来的路上&#xff0c;回顾总结下今天&#xff0c;有点莫名的忧伤&#xff0c;感觉现在同事间的协作内耗很大&#xff0c;为什么一个简单的定制&#xff0c;就感觉涉及到多道流程多个不同负责人后就变的很复杂&#xff0c;进而组织的整体效率可想而知。一天大部分时间…

linux之nm命令

1、nm命令介绍 nm命令很好记&#xff0c;当时看到大神在我的电脑面前在open ssl编译的.a文件里面过滤SHA函数&#xff0c;nm你就这样记&#xff0c;nm 尼玛, 哈哈。我们可以通过nm命令查看后缀out文件和后缀a文件里面的函数和部分属性。比如我们过滤SHA函数&#xff0c;命令如下…