js如何实现文本框获得焦点时显示文本内容,失去焦点时隐藏

解决方案 »

  1.   

    html element可以随意自定义属性,因此你可以为一个element预先设置标记“是否显示水印”的属性,假设它默认为“是”,然后再默认地给出水印样式。例如<input type="text" 水印="是" class="文本水印" onkeydown="if(this.水印=='是')this.class='文本默认样式';" .....其它属性/>当然,所有属性其实都可以在aspx或者ascx上定义,也可以在后台使用 control.Attibutes[...]=.... 方式来动态设置,不需要特意另外写什么“js代码”。
      

  2.   

    asp.net ajax toolkit软件包中有现成的控件可以用于声明你的需求,只要用鼠标拖到相应的aspx、ascx上,然后设置属性就可以了。参考:http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/TextBoxWater/TextBoxWater.aspx
    http://www.google.com.hk/search?q=asp.net+TextBoxWater&hl=zh-CN&newwindow=1&safe=strict&source=lnt&tbs=lr:lang_1zh-CN%7Clang_1zh-TW&lr=lang_zh-CN%7Clang_zh-TW&sa=X&ei=1t7sTMvCGYncvQOizuzRAQ&ved=0CAcQpwU当然几乎任何一种javascript的扩展工具框架包中也都包括这个。
      

  3.   

    <input type="text" onfocus="this.value='请填写';" onblur="this.value='';" />
      

  4.   

    给你个示例//模糊查询文本框失去焦点时如果为空设置
                var hot = "模糊条件|姓名|毕业学校|工作经历|证书|职称";
                $("#txtSearch").val(hot);
                $("#txtSearch").focus(function() {
                    if ($(this).val() == hot) {
                        $(this).val("");
                    }
                }).blur(function() {
                    var content = $(this).val();
                    if (content == "") {
                        $(this).val(hot);
                    }
                });
      

  5.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
        <title>无标题页</title>
        
        <script language ="javascript" >
            function GetIn()
            {
                document .getElementById ("txt").value = "你的值";
            }
            
            function GetOut()
            {
                document .getElementById ("txt").value = "";
            }
        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
      
            <input type ="text" id="txt" onmouseup ="GetIn();" onblur="GetOut();"/>
        </form>
    </body>
    </html>
      

  6.   


    <!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>
        <title>无标题页</title>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
    function getValue(){
       alert(document.getElementById('zzz').value);
    }
        </script>
    </head>
    <body>    
    <input type ="text" id="txt" value="请输入要搜索的条件" onfocus="javascript:if(this.value=='请输入要搜索的条件')this.value=''" onblur="javascript:if(this.value.length==0)this.value='请输入要搜索的条件'"/>
    </body>
    </html>
      

  7.   

    jq删掉,随便拿个网页测试忘了把jq删掉了