`

jQuery实现input文本框内灰色提示文本效果 和 input标签获取焦点是文本框内提示信息清空

阅读更多

一、jQuery实现input文本框内灰色提示文本效果

 

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>input test</title>  
<script type="text/javascript"
    src="./js/jquery.js"></script>
<script type="text/javascript">  
function inputTipText(){    
$("input[class*=grayTips]") //所有样式名中含有grayTips的input   
.each(function(){   
   var oldVal=$(this).val();   //默认的提示性文本   
   $(this)   
   .css({"color":"#888"})  //灰色   
   .focus(function(){   
    if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val("").css({"color":"#888"})}   
   })   
   .blur(function(){   
    if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}   
   })   
   .keydown(function(){$(this).css({"color":"#000"})})   
     
})   
}   
  
$(function(){   
inputTipText();  //直接调用就OK了   
})   
</script>  
</head>  
<body>  
<input type="text" value="输入您的用户名" class="grayTips" />  
<input type="text" value="输入您的登录密码" class="aaagrayTips"/>  
</body>  
</html>
二、input标签获取焦点是文本框内提示信息清空 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript" type="text/javascript"> 
function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}
function checkText(){
    var textId = document.getElementById('test');
        //设置文本框中的字体颜色为灰色
        document.getElementById('test').style.color='#C0C0C0';
    var textDefault = '中文';
    function cls(){
        if (this.value == textDefault){
            this.value = '';
        }
    }
    function res(){
        if (this.value == ''){
            this.value = textDefault;
        }
    }
    textId.onfocus = cls;
    textId.onblur = res;
}
addLoadEvent (checkText);
</script>
<body>
<input type="text" id="test" value="中文" />
</body>
</html>

 

分享到:
评论

相关推荐

    html文本框input表单输入框默认提示信息插件,获得焦点自动清空默认值,失去焦点对比确认默认值

    当input失去焦点时 会判断输入值与默认值是否一致 如果一致(或空)则再次显示默认提示信息 若不一致(已输入信息)则input值为所输入值 3 此插件是jquery插件 调用方式为 $ &quot;#xxx&quot; autoTip ; 并可以指定...

    Input框后面的“X”实现清除文本框插件

    IE11 在Input框内添加一个“X”,用来点击清除用户输入的数据,个人觉挺好用的,但是其它浏览器不会出现, 特进行插件扩展,实现所有浏览器都能出现“X” 实现原理: 此插件通过查找所有Input框 type="text" 属性 ...

    jquery注册文本框获取焦点清空,失去焦点赋值的简单实例

    在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语。 &lt;html&gt; &lt;head&gt; &lt;meta ...

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

    本文实例讲述了jQuery设置和移除文本框默认值的方法。分享给大家供大家参考。具体分析如下: 开始时,文本框设定一个默认值。当光标移动到文本框时,如果文本框当前值是默认值,那么清空;离开文本框时,文本框值...

    输入框默认值

    * @功能 实现功能是初始化时文本框中默认值,当鼠标移入则清空默认值;但如果用户没有输入任何值,则还原默认值;提交时候如果是默认值则清空 * @描述 基于jquery 所以使用前必须导入jquery包 * @使用方法: 1,在...

    jquery例子

    //清空div中的内容 autoNode.html(""); //对word进行遍历 wordNodes.each(function(i){ //取当前word var wordNode=$(this); //创建div节点 var crediv...

    【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)

    本文实例总结了jQuery实用代码片段。分享给大家供大家参考,具体如下: //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { //保存当前文本框的值 var vdefault = this...

    Jquery给基本控件的取值、赋值示例

    //文本框,文本区域: $(“#text_id”).attr(“value”,”);//清空内容 $(“#text_id”).attr(“value”,’test’);//填充内容 LABLE: var str =$(“#lbl”).text(); $(“#lbl”).text(Value); /*获取单选按钮的值*...

    ExtAspNet_v2.3.2_dll

    -为空则使用默认的提示信息,默认的提示信息支持多语言,建议一般情况下使用默认信息。 +为表单字段增加MarkInvalid和GetMarkInvalidReference函数(feedback:sun1299shine)。 -增加示例:form/form_validate....

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...

    文章管理系统

    3.修复后台登录验证没有清空验证码信息,导致增加暴力解密风险 4.修复通过后台文章编辑附件栏自定义内容可能导致删掉网站任意文件的BUG 5.修复后台服务器文件管理,文件总大小超过几G会出现页面程序错误BUG 6.完善...

Global site tag (gtag.js) - Google Analytics