JQUERY点击输入框提示文字消失

最新推荐文章于 2020-12-24 18:42:02 发布
最新推荐文章于 2020-12-24 18:42:02 发布
阅读量1.8k 收藏
点赞数
分类专栏： 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>JQUERY点击输入框提示文字消失</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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>
lb8607
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jquery实现输入框获取焦点消失文字
10-27
在本文中，我们将探讨如何使用jQuery实现输入框获取焦点时提示文字消失，并在失去焦点时恢复显示，以提高用户交互体验。这种方法常用于登录表单、注册表单等需要用户输入信息的场景。 首先，我们需要一个基础的HTML...
input点击后placeholder中的提示消息消失
09-02
这可能会影响用户体验，因为用户可能期望点击输入框后提示信息就应立即消失。为了解决这个问题，可以通过JavaScript来实现自定义行为，确保`placeholder`文本在输入框获得焦点时消失。例如： ```html 多个关键词...
用jquery实现输入框消失文字 .
weibingbing_net的专栏
06-08 558
html>                                                                                                                          head>
js实现input文本框点击时文字消失，失去焦点时文字出现
Lam's IT Story
12-08 1986
本文转载自：http://hi.baidu.com/anyongqiang/item/29c55dd5c32d0b94270ae775 有三种方法来实现，个人首选第三种 一、 <INPUT onblur="if (value ==''){value='输入文字'}" onclick="if(this.value=='输入文字')this.value=''" maxLength=40 ...
美观的CSS搜索框，点击后提示消失
07-24 904
一个美观的CSS网页搜索框，没其它的什么东西，主要是搜索框，觉得挺美观大方，于是拿出来奉献给大家，添加到你的网页里肯定效果不错。它的点击后提示消失的功能也很不错，鼠标只要点击一下搜索框，提示文字就不见了，鼠标移开后...
jQuery input值为空输入框变红，输入值消失
03-21 2719
$('#input').blur(function () { this.style.borderColor = this.value == '' ? 'red' : 'green'; }) ...
密码框显示提示文字jquery示例
10-26
标题中的“密码框显示提示文字jquery示例”和描述中提到的“使用jquery简单的实现密码框提示文字功能”是本文的重点。我们将详细讨论如何利用jQuery来实现这一常见且实用的前端交互特性。 在Web开发中，为了提升...
html5配合css3实现带提示文字的输入框(摆脱js)
09-28
这里的`placeholder`属性值“用户名或邮件地址”会在输入框内显示，当用户聚焦或开始输入时，该提示文字会自动消失，为用户提供输入空间。 然而，为了使提示文字在聚焦或悬停时改变颜色或实现其他视觉效果，我们...
jQuery text文本框点击获取焦点时文字提示或焦点文字消失
iamber的专栏
05-21 4342
文本框输入文字后提示语消失特效 $(document).ready(function(){ //第一种 $("#focus .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示 if(thisVal!=""){ $(this).sibling
jquery笔记_文本框选中时，文字消失
Tech My Life
12-10 634
$(document).ready(function(){ $("b1").focus(function(){ var curValue=$(this).val(); if(curValue == this.defaultValue){ $(this).val=""; } }); $("b1").blur(function(){ var curValue=$(this).val();
【笔记——JQuery】输入框的的提示，点击后消失
weixin_30690833的博客
03-28 100
//普通输入框，各个参数：//e 输入框对象//temp 提示文本内容 function inputTip(e,temp){ e.click(function(){ var text = e.attr("value"); if(text.trim() == temp){ e.attr("v...
javascript搜索框点击文字消失
weixin_30278311的博客
09-17 567
javascript第一记 当获焦时,文本消失,失焦时文本出现 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head> <body><input id="text" type="text" v...
jQuery实现判空 点击文本框时，文字消失 离开文本框时，输入信息改回请输入账号
m0_51701478的博客
12-24 456
jQuery实现判空 点击文本框时，文字消失 离开文本框时输入信息改回请输入邮箱地址 1.首先添加两个TetxBox控件和一个登录按钮 2.在这里要引入js 3.js代码实现 4.运行展示 5.实现效果（当鼠标点击文本框，文本框文字消失，鼠标离开文字出现） ...
jQuery实现输入框获取焦点和失去焦点
热门推荐
xiaobing_hope的专栏
07-02 5万+
登陆界面用户名密码区获取焦点，失去焦点 在用户登陆的界面中，一般都需要用户名和密码才能登陆，这时为了增强用户体验，最好能在当前输入框没有获取焦点时，提示输入信息，获取焦点之后，提示信息消失，文本框显示的信息为用户输入的信息；同时在用户没有输入信息的情况下，或者鼠标移开的情况下，提示信息重新出现。 这时，用户名和密码区设置获取焦点和失去焦点这个小的功能就显得非常重要了。因为j
我的第一课：jquery实现点击消失
没有一明天的专栏
03-02 1198
jquery实现点击消失的源代码：                 $(document).ready(function(){         $("p").click(            function()            {             $(this).hide();            }         );
文本框输入值文字消失
wing 的专栏
04-30 819
文本框输入值文字消失 $(document).ready(function(){ $("#focus .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示 if(thisVal!=""){ $(this).sibling
【python期末/课程设计】电话本管理系统(pycharm项目/Tkinter界面)
最新发布
07-25
电话本管理系统
基于python的slaee管理系统 (10).zip
07-25
基于python的slaee管理系统 (10).zip
jquery输入框错误提示
07-27
根据引用\[1\]中的代码，这是一个使用jQuery动态生成输入框的插件。在初始化输入框DOM结构时，会生成一个包含输入框和错误提示的容器。输入框的类型由参数type指定，错误提示信息由参数placeholder指定。如果调用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值