JS 怎么实现点击文本框清空移出后又恢复

Question

比如灰色字在文本框上提示  请输入用户名
点击进去清空，移出又显示。还有怎么判断如果用户去输入  请输入用户名   这几个字移出的时候不会成灰色JS只是判断是否是等于 请输入用户名。但是怎么判断是用户输的还是没填的情况下移出后出来的呢？

Answer 1

默认 灰色字  请输入
鼠标点击文本框 清空文本框，document.getElementByID("文本id").val("")
鼠标移开事件。 先获取文本框数据是否为空字符，如果是 则document.getElementByID("文本id").val("请输入")。否则，不管。
就这样的思路咯

Answer 2

意思是 判断的是 如果这个value="请输入"那么点击文本框就会变成空。但是如果我手动输入一个 “请输入” 在文本框内的话，那么我移出再点进去不是就会清空文本框了吗？是判断的值啊。var val = document.getElementById("txt1").value;
if (val == "请输入") {
document.getElementById("txt1").value = "";
} else {
document.getElementById("txt1").value = "请输入"
}
这个时候如果用户就输入了 “请输入” 这3个字怎么办？

Answer 3

   <!--lz试试下面这段,设置个flag就可以了。不过我困惑的是为何不跟空字符串或者undefined进行比较呢，你的目的其实就是用户没有输入的时候给他提示信息啊。。-->
   <input type="text" onblur="if(!this.value){this.value='请输入答案...';this.flag=undefined;}else{this.flag='true'};return true;"
         onfocus="if(this.value=='请输入答案...'&&!this.flag)this.value='';return true;" value="请输入答案..." />

Answer 4

给文本框加入两个事件“onblur”，“onfocus”.
html code:
<input type="text"  id="demo" value="请输入" />
jquery code:
$(function(){
   $("#demo").attr("style","color:#CCCCCC;font-style:italic;")
   $("#demo").bind("focus",function(){
       if($(this).val() =="请输入") $(this).val(""); $(this).removeAttr("style");
   });
   $("#demo").bind("blur",function(){
     if($(this).val() =="") $(this).val("请输入"); $(this).attr("style","color:#CCCCCC;font-style:italic;");
   });
})

Answer 5

以下代码改自本网页<input id="search_key" name="key" type="text" onkeyup="oku(this)" flag="1" onblur="ob(this)" onfocus="of(this)" value="这里也许就有你要的答案... " size="25"><script>
oku = function(obj){
obj.setAttribute('flag',0)
}ob = function(obj){
if(obj.getAttribute('flag')=="1")
obj.value='这里也许就有你要的答案... ';
}of = function(obj){
if(obj.getAttribute('flag')=="1")
obj.value='';
}
</script>

Answer 6

内容状态
1）文本框有内容
2）文本框没有内容事件状态
1）文本框focus
2）文本框blur要做的事情就是在 2个事件中 判断状态的 2种情况 然后来定义文本框的显示剩下的自己写了

Answer 7

UP
两个事件“onblur”，“onfocus”.

Answer 8

直接上代码用代码说明一切<script language="javascript" type="text/javascript">
        $(function () {
            $("#TestText").val("默认值");
            $("#TestText").css("color", "gray");
            $("#TestText").focus(function () {
                var val = $("#TestText").val();
                if (val == "默认值") {
                    $("#TestText").val("");
                    $("#TestText").css("color", "black");
                }
            });
            $("#TestText").blur(function () {
                var val = $("#TestText").val();
                if (val=="") {
                    $("#TestText").val("默认值");
                    $("#TestText").css("color", "gray");
                }
            });
        });
    </script>