您现在的位置是: 首页 » 网页代码 » HTML如何重置input字段的值?
网页代码

HTML如何重置input字段的值?

网站优化小编一月 10, 2020 18人已围观

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

效果:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:271天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:4000 条
  • 文章评论:153 条
  • 微信公众号:扫描二维码,关注我们