Question

JS表单代码获得焦点自动清除提示，失去焦点恢复默认提示

问题代码如下：
document.writeln('<form id=\"SearchForm\" name=\"SearchForm\" method=\"get\" action=\"/plus/Search.asp\">')
document.writeln('<li>')
document.writeln('<input name=\"KeyWord\" type=\"text\" class=\"bar\" value=\"搜索您感兴趣的资源\" />')
document.writeln('</li>')
document.writeln(' <input name=\"ChannelID\" value=\"111\" type=\"hidden\" />')
document.writeln('<li><input name=\"提交\ "type=\"button\" class=\"go backcolr\" value=\"GO\" /></li>')
document.writeln('</form>')

需要解决两个问题：
1、以上代码是搜索框的查询代码，希望搜索框内有提示的问题搜索您感兴趣的资源，当鼠标点击搜索框，提示文字消失，当鼠标移出框外提示文字回复显示；
在HTML中直接用onFocus="if(value==defaultValue){value='';}" onBlur="if(!value){value=defaultValue;}"
就可以实现，但是转换进JS代码中，就提示代码错误，不知道什么原因。

2、点击<li><input name=\"提交\ "type=\"button\" class=\"go backcolr\" value=\"GO\" /></li>现在没有任何链接，不知道什么原因，应该是代码错误。

图片效果如下图：
感谢同志们帮助，问题已经解决。

第一个问题是参考HUI江尚解决的，
第二个问题是通过杯水看世界解决的。

这分给谁呢，这下痛苦了。

实在没办法，考虑到大家提供的答案都是一种解决的办法，但是结合我原来代码，改动最少，又能解决问题的，是HUI江尚、杯水看世界的答案。
为了鼓励新人，我想把分给等级最低的一位，还望老同志也照顾以及原谅一下。
感谢大家！辛苦了

Answer 1

第一个问题的解决办法：

<script type="text/javascript">
window.onload = function() {
    var keyWord = document.getElementsByName('keyWord')[0];   //搜索name为keyWord的DOM对象
    keyWord.onfocus = function() {
        keyWord.value = '';
    };
    keyWord.onblur = function() {
        keyWord.value = '搜索您感兴趣的资源';
    };
}
</script>

第二个问题之所以没反应是因为你的提交按钮的type写错了，应该是

<input name=\"提交\ "type=\"submit\" class=\"go backcolr\" value=\"GO\" />

希望对你有所帮助！

追问

第二个问题解决，这下麻烦了，
第一个问题是参考HUI江尚解决的，
第二个问题是通过杯水看世界解决的。

这分给谁呢，这下痛苦了。

Answer 2

<script type="text/javascript">
window.onload = function() {
    var keyWord = document.getElementById('keyWord');
    keyWord.onfocus = function() {
        keyWord.value = '';
    };
    keyWord.onblur = function() {
        keyWord.value = '搜索您感兴趣的资源';
    };
}
document.writeln('<form id=\"SearchForm\" name=\"SearchForm\" method=\"get\" action=\"/plus/Search.asp\">')
document.writeln('<li>')
document.writeln('<input name=\"KeyWord\" type=\"text\" id=\"keyWord\" class=\"bar\" value=\"搜索您感兴趣的资源\" />')
document.writeln('</li>')
document.writeln('        <input name=\"ChannelID\" value=\"111\" type=\"hidden\" />')
document.writeln('<li><input name=\"提交\ "type=\"button\" class=\"go backcolr\" value=\"GO\" /></li>')
document.writeln('</form>')

</script>

追问

出来的效果如下：

就剩下了一个框，放大镜图标也没了。

追答

要改一下  ：

    window.onload = function() {
        var keyWord = document.getElementById('keyWord');
        keyWord.onfocus = function() {
            if (!keyWord.value || keyWord.value=='搜索您感兴趣的资源') {
                keyWord.value = '';
            }
        };
        keyWord.onblur = function() {
            if (!keyWord.value) {
                keyWord.value = '搜索您感兴趣的资源';
            }
        };
    }
    至于你说的放大镜没了  那要看你是怎么定义那个放大镜的样式的

Answer 3

之前的页面我转换成JS，也是点击消失，然后移开出现。

在线的页面中调用，是可以的。

你看下，可以的话可能需要你自己再修改下！

追问

第一个问题解决，

第二个问题还需要帮助，现在点击放大镜图标，还是没有任何反应，不知道哪里错了。

第二个问题解决，这下麻烦了，
第一个问题是参考HUI江尚解决的，
第二个问题是通过杯水看世界解决的。

这分给谁呢，这下痛苦了。

追答

呵呵，没事的，解决了就行了。
你说的放大镜是搜索的按钮吧！

追问

是的，现在已经解决

追答

解决了就好，我也经常在网上问问题。

Answer 4

onFocus="if(this.value=='搜索您感兴趣的资源'){value='';}" onBlur="if(!value){this.value='搜索您感兴趣的资源';}"