关于一个输入框效果，请大家帮忙。

....这个要用到input的几个事件

我用了onfoucs等事件还是无法完全实现这样的效果

<!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>ceshi</title>
<style>
input{
background:#ccc;
}
</style>
<script>
function test(obj){

var value = obj.value;
if(value!=""||value!=null){
obj.style.background = "#ccc";
}
}
function click_input(obj){
obj.value = "";
obj.style.background = "#fff";
}
</script>
</head><body>
<input name="txt" type="text" id="txt01" value="你的姓名" onblur="test(this)" onclick="click_input(this)" />
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>ceshi</title><script>

function focuss(){
   var value= document.getElementById( "txt01").value;
    if(value!=""){
document.getElementById( "txt01").style.color="#000";
document.getElementById( "txt01").value="";
    }
}
function blurs(){
var value= document.getElementById( "txt01").value;
    if(value=="")
{
    document.getElementById( "txt01").value = "你的姓名";
    document.getElementById( "txt01").style.color="#ccc";
}
}
</script>
</head><body>
<input name="txt" type="text" id="txt01" value="你的姓名"  onfocus="focuss()" onblur="blurs()" style="color:#ccc;"/>
</body>
</html>

<!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 type="text/javascript">
        String.prototype.trim = function(){
            return this.replace(/(^\s*)|(\s*$)/g,"");  }             function Come(obj)
            {
                var txt=document.getElementById(obj);
                if(txt.value.trim()=="请输入要搜索的内容")
                {
                    txt.value="";
                }
            }

            function out(obj)
            {
                var txt=document.getElementById(obj);
               if(txt.value.length==0 || txt.value.trim()=="")
               {
                   txt.value="请输入要搜索的内容";
               }
            }
    </script>

</head>
<body>
    <form id="form1" runat="server">

    <div>
        <input id="txtInput" value="请输入要搜索的内容"  onfocus="Come('txtInput');" onblur="out('txtInput');" type="text" />    </div>
    </form>
</body>
</html>
解决了，，楼主分分。。

<!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 type="text/javascript">
        String.prototype.trim = function(){
            return this.replace(/(^\s*)|(\s*$)/g,"");  }             function Come(obj)
            {
                var txt=document.getElementById(obj);
                if(txt.value.trim()=="请输入要搜索的内容")
                {
                    txt.value="";
                }
            }

            function out(obj)
            {
                var txt=document.getElementById(obj);
               if(txt.value.length==0 || txt.value.trim()=="")
               {
                   txt.value="请输入要搜索的内容";
               }
            }
    </script>

</head>
<body>
    <form id="form1" runat="server">

    <div>
        <input id="txtInput" value="请输入要搜索的内容"  onfocus="Come('txtInput');" onblur="out('txtInput');" type="text" />
    </div>
    </form>
</body>
</html>

应该就用onfocus和onblur这两个事件控制光标进入文本框和离开文本框失去焦点，在失去焦点时再做个判断是否为空就行了吧

String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g,"");
} 这个是正则表达式吗？String.prototype.trim 表示什么？

调试易

关于一个输入框效果，请大家帮忙。

解决方案 »