从输入字段中删除文字文本

Question

注意：我是Javascript的新手。

这是代码：

它来自 HTML 页面本身

<form action="#" id="ToolKeywordSearch">
  <input type="text" class="ProductFinderText"
          id="ToolSearchField"onblur="if(this.value=='')    
             {this.value='Enter Search Term ';}" 
                onclick="if (this.value == 'Enter Search Term ')
                  { this.value = ''; }" value="Enter Search Term " />
</form>
 ___________________________________
|  _____________________     ______ |      (restriction does not let me insert image)
| |                  |O |   |      ||
| |enter search term | |   |Search||                      
|  ---------------------     ------ |
|___________________________________|

这是它的作用：当按下搜索按钮时，它会打开搜索字段

搜索图像是背景：

#ToolSearchField {
 background:url(../../Content/images/search_but.png) no-repeat scroll 
    right center   transparent;

光标：指针; }

如何删除搜索字段中的文本？ 使用Javascript或CSS，尝试了两者，但没有成功。

<script type="text/javascript">
    var jo = document.getElementById("ToolSearchField").value;
    alert(jo);
</script>
I receive Enter Search Term as an output. 
Then if I insert remove(); instead, it doesn't do anything.
var jo = document.getElementById("ToolSearchField").value;
    jo.remove();

最终结果应具有启动搜索操作的搜索按钮。

请告诉我，我做错了什么。

Answer 1

您正在实例化的var jo在javascript的第一行之后具有字符串值"输入搜索词"。在下一行中，您将告诉此字符串remove()，这在原始元素中没有实现任何效果。

试试document.getElementById("ToolSearchField").value = "";吧！

Answer 2

看起来你真的想要一个占位符：

<input type="text" class="ProductFinderText"
    id="ToolSearchField"
    placeholder="Enter Search Term " />

然后为旧版浏览器添加占位符填充。

Answer 3

请在此处查看本教程：http://www.ozzu.com/javascript-tutorials/tutorial-watermark-text-boxes-html-javascript-jquery-t106384.html

本教程展示了如何使用 jQuery 实现效果。如果你是Javascript的新手，那么我强烈建议你研究jQuery，它使很多事情变得容易得多。