`
Franciswmf
  • 浏览: 800110 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jquery设置文本框默认文字消失效果2种

 
阅读更多
效果图:




代码:
<!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-1.7.2.min.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> 
  • 大小: 19.4 KB
分享到:
评论

相关推荐

    jquery文本框显示描述文字rar

    在本主题中,我们关注的是一个特定的jQuery特效:在文本框(input)中显示描述文字,当用户开始输入时这些文字会消失。这个功能常见于许多表单设计中,用于提示用户输入内容的类型或者格式,提供更好的用户体验。 ...

    jQuery实现文本框获得焦点文字消失

    通过这种方式,我们实现了jQuery实现文本框获得焦点时文字消失的效果。这种方法不仅可以提高用户体验,还能保持页面的简洁性。在实际项目中,可以根据需要对代码进行优化和扩展,例如,为多个文本框添加此功能,或者...

    文本框默认提示文字

    在IT行业中,用户体验是至关重要的一个方面,而“文本框默认提示文字”就是提升用户体验的一种常见设计策略。这种设计主要用于引导用户输入信息,通过在文本框内预设一些提示性文字,来帮助用户理解该输入区域的目的...

    asp.net后台实现文本框提示文字

    在ASP.NET开发中,我们经常需要为用户界面提供友好的提示信息,比如在文本框(TextBox)中显示默认的提示文字。这样的功能可以提高用户体验,因为它在用户输入前提供了清晰的指引。本篇文章将深入探讨如何在ASP.NET...

    文本框显示描述文字

    在描述中提到的jQuery插件,是一种预设功能的扩展,可以增强文本框的功能,例如在文本框未被聚焦时显示默认的提示信息。这种提示信息通常被称为“占位符”或“水印”,会在用户开始输入时自动消失,帮助用户理解应该...

    文本框 默认值 灰色 方法 网络 浏览器

    总结,实现文本框默认灰色文本的方法主要依赖于HTML5的`placeholder`属性和jQuery库,但在处理浏览器兼容性和网络环境时需谨慎,以确保所有用户都能获得一致的体验。同时,考虑到性能优化,合理使用资源和代码组织...

    用jquery实现输入框获取焦点消失文字

    我们在登录网站的时候,文本框中经常会有提示你输入的信息,当你点击文本框,提示信息自动消失,当文本框什么都没有,而且失去焦点的时候,又有了提示文字。 1.原型开发,先做一个简单的: 我们首先需要一个html文件...

    文本框水印效果

    在网页设计中,文本框(TextBox)的水印效果是一种常见的功能,它可以在输入框内显示提示性文字,用户在未输入任何内容时看到这些文字,一旦开始输入,文字就会消失。这种效果可以帮助用户理解输入框的目的,提高...

    javascript和jquery实现设置和移除文本框默认值效果代码

    总之,无论是使用原生JavaScript还是jQuery,实现设置和移除文本框默认值效果的关键在于合理运用onfocus和onblur事件,以及正确地处理input元素的value属性。通过上述示例,我们可以看到,通过简单的代码修改,即可...

    简单实现的JQuery文本框水印插件

    在网页设计中,为了增强用户体验,常常会在输入框(文本框)中添加“水印”效果,即在用户未输入任何内容时显示提示性文字,一旦用户开始输入或聚焦到输入框,这些提示文字就会消失。JQuery是一个流行的JavaScript库...

    文本框输入文字后提示语消失特效特效代码

    在文本框默认状态下,通常会显示一个提示文本(placeholder),用于指导用户输入何种信息。当用户开始在文本框中输入文字时,这个提示文本应当自动消失,以便给实际输入的内容腾出空间。这种行为可以提供清晰的视觉...

    搜索框点击字体消失。滑出字体出现

    但是,如果我们想要实现点击后文字消失,可以设置一个默认的提示文本,并在用户点击搜索框时隐藏这个文本。 以下是一个简单的JavaScript实现示例: ```html &lt;!DOCTYPE html&gt; 搜索框示例 input[type="text...

    jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码

    为了提高用户体验,经常会在表单的输入框(`input`元素)内预设提示性文字,这些文字在用户未输入时显示,一旦用户聚焦输入框开始输入,提示文字应自动消失。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作和...

    26个JQuery使用技巧

    根据提供的文件信息,本文将详细解释其中提及的四个jQuery使用技巧,包括禁用右键点击、禁用搜索文本框中的提示文字、在新窗口中打开链接以及如何检测浏览器类型。 ### 1. 禁用右键点击 (Disable Right-click) 在...

    jquery获取焦点和失去焦点事件代码

    在给定的标题和描述中,我们关注的是如何使用jQuery来处理输入框(input)的焦点和失焦事件,特别是在搜索框中的应用,当用户点击搜索框时,预设的文字消失,用户开始输入;而当用户离开搜索框时,如果未输入任何内容...

    jQuery响应鼠标事件并隐藏与显示input默认值

    当用户点击(获得焦点)input元素时,如果当前的值与默认值相同(即用户尚未输入任何内容),则清空该元素的值,从而使默认提示文字消失;而当用户离开(失去焦点)该元素时,如果input元素为空,则将默认值重新填充...

    CSS3注册表单文本框占位符特效

    总结起来,CSS3注册表单文本框占位符特效是一种利用CSS3技术优化网页表单设计的方法,通过增强占位符的视觉效果和交互体验,使用户更易于理解和使用表单,从而提高网站的可用性和用户满意度。开发者可以根据自己的...

    asp.net中文水印透明度

    水印效果通常用于为用户提供非侵入性的输入提示,当用户聚焦或输入内容时,水印文字会自动消失。在处理中文水印时,透明度的调整显得尤为重要,因为中文字符的复杂性可能导致与背景或其他元素的冲突,从而影响用户...

    表单与列表

    - 作用:提供默认提示文字,当用户点击输入时,提示文字自动消失。 - 特性:增强用户体验,帮助用户理解如何使用该字段。 - **禁用的文本框** - 标签: - 作用:禁止用户对该文本框进行任何操作。 - 特性:可...

Global site tag (gtag.js) - Google Analytics