想要实现如下图所示的效果,鼠标点击文本框时,将文本框清空,鼠标没有聚焦在文本框上时,用默认值填充;
代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><script type="text/javascript">// 鼠标点击搜索框时执行function my_click(obj, myid) {// alert(document.getElementById(myid).value);// alert(document.getElementById(myid).defaultValue);//点击时,如果取得的值和搜索框默认value值相同,则将搜索框清空if(document.getElementById(myid).value == document.getElementById(myid).defaultValue) {document.getElementById(myid).value = '';obj.style.color = '#000'; // 黑色}}// 鼠标不聚焦在搜索框时执行function my_blur(obj, myid) {// alert(document.getElementById(myid).value);// 如果搜索框没有输入值,则用搜索框的默认value值填充if(document.getElementById(myid).value == '') {document.getElementById(myid).value = document.getElementById(myid).defaultValue;obj.style.color = '#999'; // 灰色}}// 点击搜索按钮执行function search(){document.getElementById("searchform").submit();}</script><div id="divsearch"><form action="#" id="searchform"><input type="text" name="textfield" id="textfield" value="请输入书名"onmouseover="this.focus();"onclick="my_click(this, 'textfield');"onblur="my_blur(this, 'textfield');"/><img src="${pageContext.request.contextPath}/jquery/img/searchbutton.gif" style="margin-bottom:-4px" onclick="search()"/> </form></div>