想要重置, 清除整个输入框中的值, 又不想手动一个一个删除整个内容; 或如果输入字段中已存在预先建议的输入, 用户又不想要该怎么办? 下面本篇文章就来给大家介绍一下重置 input 字段值的方法, 希望对大家有所帮助.
有两种方法可以做到这一点, 两者都非常容易和简短; 让我们来看看这两种方法.
方法 1: 获得焦点清除输入
语法:
<input onfocus=this.value=''>
做法:
● 创建一个输入字段.
● 使用 onfocus 属性将 this.value 设置为 NULL
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- </head>
- <body style="text-align:center">
- <h2 style="color:green">
- 清除输入字段
- </h2>
- <p>
- 一旦获得焦点, 下面的输入字段将被清除.
- </p>
- <input type="text" onfocus="this.value=''" value="单击此处清除">
- </body>
- </HTML>
效果:
方法 2: 借助按钮清除输入
语法:
<button onclick="document.getElementById('InputID').value =''>
做法:
● 创建一个按钮.
● 获取输入字段的 ID.
● 使用 document.getElementById('myInput').value = " 设置输入字段的值 NULL.
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- </head>
- <body style="text-align:center">
- <h2 style="color:green"> 清除输入字段 </h2>
- <p > 单击按钮后, 将清除下面的输入字段.</p>
- <button onclick= "document.getElementById('myInput').value =''">
单击此处, 清除内容
- </button>
- <input type="text" value="请输入文字" id="myInput">
- </body>
- </HTML>
效果:
来源: http://www.css88.com/qa/html5/10413.html