HTML中输入框添加提示文字并且点击消失

1、如果在输入框本身设定value值的话，判断起来有诸多不便，而且获的焦点后清空还是判断为空都会很复杂。

2、所以采用一种简单的方式，写一个独立的<div>放提示信息，把这个div的位置浮到输入框里。然后写一个点击事件函数，如果点击这个div就让输入框

获得焦点然后清空div。

3例子，

<form action="officeSearch.htm" method="get">

关键字<input type="text" id="keyword" name="keyword" maxlength="20" value='${office.keyword}' class="inpw170 inp2">

<center><input id="submit" type="submit" class="inp3 inpw170" value="查询" name="sub"></center>

</form>

<div id="text_hint"  style="position:relative;top:-130px;left:60px;color:#ccc"  onclick="inputClick()"><c:if test="${ ! empty office.keyword}"></if>请输入名字性别</div>

写一个函数，或者写到div的onclick=“ ”里

<script type="text/javascript">

function inputClick(){

document.getElementById('keyword').focus();

document.getElementById('text_hint').innerHTML=' ';

}

</script>

搞定

但是不知道这个位置的问题放到手机浏览器里会不会有变化。反正google和IE是没问题的。