刪除輸入字段中的文字

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; 

cursor：pointer; }

如何刪除搜索字段中的文本？與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

看看這個教程在這裏：http://www.ozzu.com/javascript-tutorials/tutorial-watermark-text-boxes-html-javascript-jquery-t106384.html

本教程介紹瞭如何使用jQuery來實現你的效果。如果你剛接觸Javascript，那麼我強烈建議調查jQuery，它使得很多事情變得更容易。

Answer 3

它看起來像你真的想要一個佔位符：

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

然後包括placeholder polyfill for older browsers.