阿里笔试题（五）

题目：

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

当用户输入时，隐藏提示文字，且恢复为默认色：

 

当输入框失去焦点，如果输入为空，需还原提示信息：

要求：

a) 写出HTML和CSS代码

b) 用JavaScript实现功能

答：

html代码：

<input id="content" type="text" class="content"></input>

css代码：

.content{color:gray;}

jquery代码：

$(document).ready(function(){$("#content").val("请输入内容");$("#content").focus(function(){if(this.value=="请输入内容"){$(this).val("");}$(this).<strong>removeClass</strong>("content")}).blur(function(){var pattern=/^\s*$/g;if(pattern.test($(this).val())){$(this).val("请输入内容");}$(this).<strong>addClass</strong>("content");})})

javascript代码：

var inp=document.getElementById("content");inp.value="请输入内容";///////////////////////////////////第一种事件处理方式inp.onfocus=function(){if(this.value=="请输入内容"){this.value="";}this.classList.remove("content");}inp.onblur=function(){var pattern=/^\s*$/;if(pattern.test(this.value)){this.value="请输入内容";}this.classList.add("content");}/////////////////第二种事件处理方式/*addEvent(inp,"focus",target_focus);addEvent(inp,"blur",target_blur);function target_focus(){if(this.value=="请输入内容"){this.value="";}this.<strong>classList.remove</strong>("content");}function target_blur(){var pattern=/^\s*$/;if(pattern.test(this.value)){this.value="请输入内容";}this.<strong>classList.add</strong>("content");}function addEvent(target,type,handle){if(target.addEventListener){target.addEventListener(type,handle,false);}else if(target.attachEvent){target.attachEvent("on"+type,function(){handle.apply(target);});}else{target["on"+type]=handle;}}*/