首页 > 试题广场 >

下面是个输入框，当没有获取焦点时，显示灰色的提示信息。

[问答题]
下面是个输入框
当没有获取焦点时，显示灰色的提示信息：
当用户输入时，隐藏提示文字，且恢复为默认色：
当输入框失去焦点，如果输入为空，需还原提示信息：
要求： a) 写出HTML和CSS代码 b) 用JavaScript实现功能
查看答案及解析
添加回答
推荐
MetooQ头像 MetooQ 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<style>
 #content{
 color:grey;
 }
</style> 
<body>
 <input type="text" id="content" value="请输入内容">
</body>
<script>
 var input = document.getElementById("content");
 input.onfocus = function(){
 if(this.value == "请输入内容"){
 this.value = "";
 this.style.color = "black";
 }
 }
 input.onblur = function(){
 if(this.value == ""){
 this.style.color = "grey"; 
 this.value = "请输入内容";
 }
 }
</script>
</html>

编辑于 2015-06-19 16:47:23 回复(1)
洁头像 洁 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input{
            border: solid 1px silver;
            width: 120px;
        }
    </style>
</head>
<body>
<input type="text" id="hello" placeholder="请输入内容" value="">
<script>
    function addEvent(el,type,listener){
        if(el.addEventListener){
            el.addEventListener(type,listener,false);
        }else if(el.attachEvent){
            el.attachEvent("on"+type,listener);
        }else{
            el["on"+type]=listener;
        }
    }

    var input=document.getElementById("hello");
    function getTar(e){
        var event=e||window.event;
        return event.target||event.srcElement;

    }
    function focusHandler(e){
        var target=getTar(e);
        target.placeholder="";
    }
    function blurHandler(e){
        var target=getTar(e);
        if(this.value!=""){
            this.value=target.value;
        }else{
            target.placeholder="请输入内容";
        }
    }
    addEvent(input,"focus",focusHandler);
    addEvent(input,"blur",blurHandler);

</script>
</body>
</html>

编辑于 2015-08-20 21:42:52 回复(0)
牛客526366号头像 牛客526366号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input-test</title>
<script>
window.onload=function(){
var oInput=document.getElementById('username');
oInput.onfocus=function(){
if(this.value==this.defaultValue){
this.value='';
this.style.color='black';
}
}
oInput.onblur=function(){
if(this.value==''){
this.value=this.defaultValue;
this.style.color='gray';
}
}
}
</script>
<style type="text/css">
#username{
color:gray;
}
</style>
</head>
<body>
<input type="text" id="username"/ value="请输入内容">
</body>
</html>
发表于 2015-11-11 10:52:52 回复(0)
Bidding头像 Bidding 
CSS：#input{border: 1px solid #ccc;}
HTML：<input type="text" id="input" value="请输入内容">
JS：
window.onload=function(){
	var oInput=document.getElementById("input");
	var value=oInput.value;
	oInput.onfocus=function(){	
		this.value="";
	};
	oInput.onblur=function(){
		if (!this.value) {
			this.value=value;
		}
	};
}

编辑于 2017-07-12 11:54:36 回复(0)
yldx头像 yldx

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#t{
width: 120px;
height:30px;
border:1px solid silver;
}
</style>
<script>
var d1=document.getElementById("t");
d1.onfocus=function(){
this.style.color="green"
}
</script>
<body>
<input type="text" id="t" placeholder="请输入内容">
</body>
</html>

发表于 2016-09-28 17:26:27 回复(0)
牛客538378号头像 牛客538378号
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
input{color:#ccc;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('content');
oBtn.onfocus=function(){
oBtn.value="";
oBtn.style.color="black";
}
oBtn.onblur=function(){
if (oBtn.value=="") {
oBtn.value="请输入内容";
oBtn.style.color="#ccc";
}
}
}
</script>
</head>
<body>
<input id="content" type="text" value="请输入内容"/>
</body>
</html>
发表于 2016-08-19 14:02:07 回复(0)
victor-vt头像 victor-vt
<!doctype html>
<html>
<head>
    <title>输入框</title>
    <meta charset="utf-8">
    <style>
        #content{
            color:grey;
        }
    </style>
</head>
<body>
    <input type="text" value="请输入内容" id="content"/>
    <script>
        var oInt = document.getElementById('content');
        oInt.onfocus = function (){
            if(this.value == '请输入内容'){
                this.value = '';
                this.style.color = '#000';
            }
        }
        oInt.onblur = function (){
            if(this.value == ''){
                this.value = '请输入内容';
                this.style.color = 'grey';
            }
        }
    </script>
</body>
</html>
发表于 2015-04-05 23:59:59 回复(0)
very_much头像 very_much
var input1 = document.getElementById("test");
input1.style.color = "grey";
input1.onfocus = function(){
if(this.value == "请输入内容"){
this.value = "";
}else{
this.style.color = "#000";
}
}
input1.onblur = function(){
if(this.value == ""){
this.value = "请输入内容";
this.style.color = "grey";
}
}
发表于 2015-03-31 16:11:40 回复(0)
koala琴琴头像 koala琴琴
a)<input type="text" id="ee" class="ee" value="请输入内容">
.ee{
color:gray;
}
b)<script type="text/javascript">
//var input=document.getElementById("ee");
var input=document.getElementsByTagName("input")[0];
var empty=true;
input.onfocus=function(){
var val=input.value;
if(empty&&val=="请输入内容"){
this.value="";
this.className="";
}
}
input.onblur=function(){
var val=input.value;
if(empty&&!val){
this.value="请输入内容";
this.className="ee";
empty=true;
}else{
empty=false;
this.className="";
}
}
  text.onkeyup = function(){
    var val = this.value;
    if(!val){
      empty = true;
    }else{
      empty = false;
    }
  }
</script>

发表于 2015-03-29 21:33:17 回复(0)
阿多头像 阿多
<html>
<head>
  <meta charset="utf-8">
</head>
<style type="text/css">
  .e{
    color:grey;
  }
</style>

<input type="text" id="text" value="请输入内容" class="e">

<script type="text/javascript">
  var text = document.getElementById("text");
  var empty = true;
  text.onfocus = function(){
    this.className = "";
    var t = this.value;
    if(empty && t == "请输入内容"){
      empty = true;
      this.value = "";
    }
  }
  text.onblur = function(){
    var t = this.value;
    if(empty && !t){
      empty = true;
      this.value = "请输入内容";
      this.className = "e";
    }else{
      empty = false;
      this.className = "";
    }
  }
  text.onkeyup = function(){
    var t = this.value;
    if(!t){
      empty = true;
    }else{
      empty = false;
    }
  }
</script>
</html>
发表于 2015-02-26 20:06:58 回复(0)
牛客224199号头像 牛客224199号
<style>
#txt{color:#ddd;}
</style>
<input type="text" value="请输入内容"  id="txt'>
<script>
       window.onload=function(){
            var oTxt=document.getElementById('txt');
            oTxt.onfoucs=function(){
                oTxt.value='';
            }
            oTxt.blur=function(){
                oTxt.value='请输入内容';
            }
        }
</script>

发表于 2014-12-22 21:52:20 回复(0)
lenrinfvck头像 lenrinfvck
<style>
</style>
<script>
    $.ready(function(){
        $('input').bind('focus',function(){
            $(this).val('');
        })
        $('input').bind('blur', ,function(){
            var value = $(this).val()||'请输入内容';
            $(this).val(value);
        )
})
</script>
<body>
<input type="text" value="请输入内容"/>
</body>

发表于 2014-12-16 22:06:39 回复(0)
刘剑锋_F2E头像 刘剑锋_F2E
<input placeholder="aa" />

input{
   color:#ccc;
 }

<script>
     var _input = document.getElementsByTagName("input")[0];
     if(!_input.placeholder){
         var _val =  _input.value;
         if(!val) _input.value = "aa";
     }
    _input.addEventListener("focus",function(){
        _input.value = "";
     })
  _input.addEventListener("blur",function(){
       var _val =  _input.value;
        if(!val) _input.value = "aa";
     })

 </script>
发表于 2014-12-11 22:11:10 回复(0)
牛客501870号头像 牛客501870号
<doc html>
<head>
<style>
.tip{
}
input{
}

</style>
</head>
<body>
    <input type="text" />
    <script>
        var input=document.getElementsByTagName("input")[0];
        input.value="please";
        this.className="tip";
        input.onfocus=function(evt){
            this.value="";
            this.className="";
        }
input.onblur=function(){
if(this.value==""){
            this.value="please";
            this.className="tip";
}else{
    
}
    </script>
</body>
发表于 2014-12-08 13:00:32 回复(0)
字母-if头像 字母-if
<input type="text" placeholder="请输入内容"/>
发表于 2014-11-29 23:13:48 回复(0)
比目小鱼鱼头像 比目小鱼鱼
<input type="text" value="请输入内容" id="inputBox" onfocus="boxF()" onblur="boxB()"/>
<style>
#inputBox{color:gray;}
</style>
<script>
function boxF(){
    document.body.getElementById("inputBox").value='';
    document.body.getElementById("inputBox").style.color="gray";
}
function boxF(){
    if(document.body.getElementById("inputBox").value==''){
        document.body.getElementById("inputBox").value='请输入内容';
    }
    document.body.getElementById("inputBox").style.color="gray";
}


</script>

发表于 2014-11-20 12:05:26 回复(0)
海贝头像 海贝
 var oTxt=document.getElementById('txt');
oTxt.onfocus=function()
{
   
  this.value="";
}
oTxt.onblur=function()
{
    this.value="请输入内容";
}
发表于 2014-11-13 18:44:55 回复(0)
小睿瑞头像 小睿瑞
<style>
.tip { color: gray; }
</style>
<input type="text" id="test" class="tip" value="请输入内容" /> 
<script type="text/javascript"> (function(){
    var test = document.getElementById("test"),

    REG = /(^|\s+)tip(\s+|$)/,
        TIP_CLS = "tip",
        TIP_STR = "请输入内容"; 
    test.addEventListener("focus", function() {         var className = this.className;         if(className.match(REG)) {
            this.value = "";
            this.className = className.replace(TIP_CLS, "");         }     }, false); 
    test.addEventListener("blur", function() {         if(this.value.length == 0) {
            this.value = TIP_STR;
            this.className += " " + TIP_CLS;         }
    }, false); })(); </script> 

发表于 2014-11-12 16:39:58 回复(0)
oxyflour头像 oxyflour
<input type="text" />
<style>
input {
  color: #aaa;
}
input:focus {
  color: #555;
}
</style>
<script>
var DEF_VAL = 'input sth';
$('input').focus(function(e) {
  if ((e = $(e)) && e.val() == DEF_VAL)
    e.val(''); 
}).blur(function(e) {
  if ((e = $(e)) && !e.val())
    e.val(DEF_VAL);
}).trigger('blur')
</script>
发表于 2014-11-06 20:55:03 回复(0)
提交观点

问题信息

前端工程师 阿里巴巴 Javascript 2011
来自：阿里巴巴2011前端工...
上传者：benben
难度：
19条回答 16329浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号