input标签，输入内容后默认值消失实现方法

最新推荐文章于 2022-12-08 15:24:47 发布

iteye_1736

最新推荐文章于 2022-12-08 15:24:47 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Html&CSS JS 文章标签： html

本文链接：https://blog.youkuaiyun.com/iteye_1736/article/details/82605198

JS 同时被 2 个专栏收录

21 篇文章

订阅专栏

Html&CSS

7 篇文章

订阅专栏

本文通过一个简单的文本框输入示例，展示了如何使用HTML创建带有默认提示文字的输入框，并通过JavaScript实现交互效果，如清除默认值及改变样式等。这对于初学者理解网页表单元素的工作原理非常有帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type="text" value="用户名" class="gray" onclick="if(this.value=='用户名'){this.value='';this.className='black'}" onblur="if(this.value=='') {this.value='用户名';this.className='gray'}" />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_1736

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML 中的 input 标签详解

读心悦

05-16

1546

通过隐藏原生控件，使用 CSS 创建自定义样式。} </ style > < div class = " custom-checkbox " > < input type = " checkbox " id = " customCheck " > < span > </ span > < label for = " customCheck " > 自定义复选框 </ label > </ div >

input文本框里面显示提示信息

11-23

input文本框里面显示提示信息，鼠标点击文本框提示信息自动消失！

参与评论您还未登录，请先登录后发表或查看评论

使用jQuery给input标签设置默认值

11-23

由于项目需求，简单地写了一个input默认值设置，实现给.form中所有的input设置默认值的方法。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>input默认值设置</title> [removed][removed] [removed] $(function() { //集体调用 $(".form

input标签默认值

weixin_43938629的博客

06-30

4279

问题：写登陆拦截控制器时，一直拦截失败 <input type="text" th:name="username" class="form-control" placeholder="Username" required="" autofocus=""> <input type="password" th:name="password" class="form-control" placeholder="Password" required=""> //Controller层 @

＜input＞标签默认值

DeeJinG的博客

07-16

6729

前端提交form表单时候，如果 input 标签内用户没有填写任何数据的话，默认值是""（也就是空字符串），注意不是null（修改默认值，设置value属性）所以传到后台收到的是空字符串，不是null。注意判断~ ...

input文本框鼠标点击默认值消失,不输入离开鼠标恢复默认值

SJian123的专栏

06-05

1万+

input文本框鼠标点击默认值消失,不输入离开鼠标恢复默认值 1.input: 2textarea: 强制兼容：

input输入框提示

weixin_30872157的博客

06-23

129

方法一：jq$(function(){ jQuery.focusblur = function(focusid) { var focusblurid = $(focusid); var defval = focusblurid.val(); focusblurid.focus(function(){ var thisval = $(this).val...

input 标签实现输入框带提示文字效果(两种方法)

11-27

不过，这种方法在用户输入内容后失去焦点时不会显示提示文字，需要额外处理。 **方法三：直接在标签上处理** 此外，还有一种更直接的方法，即在`<input>`标签上设置默认值，并使用JavaScript在聚焦时清空输入框： ...

jQuery响应鼠标事件并隐藏与显示input默认值

10-25

当用户点击（获得焦点）input元素时，如果当前的值与默认值相同（即用户尚未输入任何内容），则清空该元素的值，从而使默认提示文字消失；而当用户离开（失去焦点）该元素时，如果input元素为空，则将默认值重新填充...

我想知道input输入栏的默认值如何设置

07-14

要设置 `<input>` 标签的默认值，您可以使用 `value` 属性。 `value` 属性定义了输入字段的初始值。例如，如果您想在输入框中显示 "默认文本"，可以这样设置： ```html <input type="text" value="默认文本"> ``` ...

HTML的input标签如果变量为空显示默认值

05-11

当用户未输入任何内容时，输入框内会显示`请输入内容`，一旦用户开始输入，该值就会消失。如果想在输入框内始终显示默认值，可以使用`value`属性，例如： ``` <input type="text" value="默认值"> ``` 在这种情况...

带提示的input输入框类似html5的 placeholder

04-12

NULL 博文链接：https://guangqiang.iteye.com/blog/1700967

javascript input输入框模糊提示功能的实现

12-04

javascript input输入框模糊提示功能的实现主要用到了jQuery.autocomplete函数，定义好一个数组就可以用这个功能了，很方便。 <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" > [removed]

点击输入框默认文字消失效果

01-14

制作点击输入框时默认文字消失的效果 01-鼠标移动上去，边框变红第一种方法 02-鼠标点击选中输入框中的提示信息 03-鼠标移动上去，边框变红第二种方法，鼠标点击选中输入框中的提示信息 04-鼠标点击输入框，提示信息消失

点击input默认值消失

生活在爪洼岛上

04-27

495

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>index.html</title> </head> <body> <in

input框输入值，默认得显示值消失

可可爱爱的你吖的博客

10-19

914

replace(/\s+/g, ‘’)即可小程序示例： textInput(e) { this.setData({ textContent: e.detail.value.replace(/\s+/g, '') }) },

Input输入框内提示效果