Input 默认值清除方法总结
在 HTML 表单设计中，input 标签的默认值是非常常见的，但是当用户点击输入框时，默认值应该被清除，以便用户输入内容。今天，我们将讨论 input 默认值清除的方法。
让我们来看一下 input 标签的基本结构：
```html
<input name="username" type="text" value="first name.last name" size="15" maxlength="60">
```
在上面的代码中，value 属性指定了输入框的默认值为 "first name.last name"。现在，我们需要在用户点击输入框时清除默认值。
方法一：使用 onfocus 事件
```html
<input name="username" type="text" value="first name.last name" size="15" maxlength="60" onfocus="this.value=''">
```
在上面的代码中，我们使用 onfocus 事件将输入框的值清除为空串。当用户点击输入框时，输入框的值将被清除。但是，这种方法有一个缺陷：当用户离开输入框时，默认值不会被恢复。
方法二：使用 onfocus 和 onblur 事件
```html
<input name="username" type="text" value="first name.last name" size="15" maxlength="60" onfocus="value=''" onblur="if(!value)value=defaultValue">
```
在上面的代码中，我们使用 onfocus 事件将输入框的值清除为空串，并使用 onblur 事件在用户离开输入框时恢复默认值。这样，当用户离开输入框时，默认值将被恢复。
方法三：使用 JavaScript 函数
```html
<input type="text" onblur="showSearch(this,1)" onfocus="showSearch(this)" name="KeyWord" value="输入关键字进行搜索">
<script>
function showSearch(obj,type){
if(type){
if(obj.value=="")
obj.value="输入关键字进行搜索";
}else{
if(obj.value=="输入关键字进行搜索")
obj.value="";
}
}
</script>
```
在上面的代码中，我们使用 JavaScript 函数 showSearch 来清除或恢复输入框的默认值。该函数根据用户的操作来判断是否清除或恢复默认值。
方法四：优化方法
```html
<input name="username" type="text" value="first name.last name" size="15" maxlength="60" onfocus="if (value==defaultValue)value='' " onblur="if(!value)value=defaultValue">
```
在上面的代码中，我们使用一个优化后的方法，该方法使用 onfocus 事件将输入框的值清除为空串，并使用 onblur 事件在用户离开输入框时恢复默认值。在该方法中，我们使用 defaultValue 属性来判断输入框的默认值，并根据用户的操作来清除或恢复默认值。
我们可以使用多种方法来清除 input 标签的默认值，但每种方法都有其优缺点。选择合适的方法取决于具体的开发需求。
