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之后具有字符串值“Enter Search Term”。在下一行中，您将此字符串告诉remove()，这在原始元素中没有实现任何内容。

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

Answer 2

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

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

然后加入placeholder polyfill for older browsers.

Answer 3

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

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

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

3 个答案: