HTML如何重置input字段的值?

想要重置、清除整个输入框中的值,又不想手动一个一个删除整个内容;或如果输入字段中已存在预先建议的输入,用户又不想要该怎么办?下面本篇文章就来给大家介绍一下重置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>

效果:

1.gif

方法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>

效果:

2.gif

以上就是HTML如何重置input字段的值?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏