JS 实现input文本框点击时文字消失，失去焦点时文字出现

HTML 输入框占位符

最新推荐文章于 2021-06-07 16:17:28 发布

最新推荐文章于 2021-06-07 16:17:28 发布 · 2.1k 阅读

文章标签：

#javascript #ViewUI

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一种使用 HTML 和 JavaScript 实现输入框默认提示文本的方法。通过 onblur 和 onclick 事件，当输入框失去焦点且为空时显示默认提示文本，点击时清除提示以便输入。

JS+html

<input onblur="if (value ==''){value='输入文字'}" onclick="if(this.value=='输入文字')this.value=''" value="输入文字" />

效果图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_17658

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js实现input文本框点击时文字消失，失去焦点时文字出现

04-14

NULL 博文链接：https://luanxiyuan.iteye.com/blog/1744279

js实现input文本框点击时文字消失，失去焦点

10-15

js实现input文本框点击时文字消失，失去焦点

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

input 失去焦点文字消失

02-19

当鼠标点到input框时文字消失当移开时恢复默认值

js文本框点击时文字消失，失去焦点时文字出现

turbo12138

01-22

781

我们经常会看到一些网站像注册要填表单的都会一种就是文本框有焦点时文本框提示消失，如果我们离开时文本西式文件提示就出来了，下面我来给大家介绍一些常见的代码。方法一，直接在input编写代码如下复制代码 <input type="text" onfocus="if(this.value=='指中我看看什么效果') this.value='';" onblur="if...

文本框点击时文字消失，失去焦点时文字出现

09-06

当文本框失去焦点（例如用户点击了别处或者按下回车键）时，如果用户没有输入任何内容，提示文字又会重新出现。这种功能在搜索框中尤其常见，例如提示用户“请输入搜索关键字”。在提供的代码中，实现了这样一个...

文本框点击时文字消失失去焦点时文字出现

05-08

### 文本框点击时文字消失失去焦点时文字出现 #### 背景介绍在Web开发中，用户体验是至关重要的一个方面。一个优秀的用户界面能够极大地提升用户的满意度和产品的竞争力。其中，表单元素（如文本框）的设计与交互...

js实现鼠标点击input框后里面的内容就消失代码

weixin_34365417的博客

03-21

451

&l...

html输入时提示文字消失,JS实现输入框提示文字点击时消失效果

weixin_35916466的博客

06-03

1439

本文实例讲述了JS实现输入框提示文字点击时消失效果。分享给大家供大家参考，具体如下：在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的，这个就是“文本框点击时文字消失，失去焦点时文字出现”这个效果；这个效果用个JS就可以完成，这个效果是做网站的人必备的JS代码；自己会写JS的写写也快，不会写的就需要代码收集以作备用，用到的时候就方便多了。下面就是这个效果实现用到的JS代码：fu...

html获取焦点时提醒句消失,jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例...

weixin_34177601的博客

06-07

986

本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能。分享给大家供大家参考，具体如下：最近都成为页面仔了，主要工作都放在了前段，以前总是写后台程序，对前端的一些技术 html,css,javascript ,虽然都懂一些，但要做出比较好看页面，还是有很大的差距的。最近就遇到了这样一个要求不是很高，但有点小清新风格的登录或注册页面，要求如下：1. 在输入框中如果没...

实现搜索框点击时提示文字消失离开时提示文字出现

热门推荐

pspgbhu的博客

04-30

1万+

一个搜索框，点击搜索框后默认提示文字自动清除，离开再次显示默认提示文字

用Javascript实现点击input输入框后输入框的提示文字消失,并且边框颜色发生变化（包含input框的password类型如何显示提示文字）

茂茂的博客

01-28

3787

用Javascript实现点击input输入框后输入框的提示文字消失。并且边框颜色发生变化（包含input框的password类型如何显示提示文字）正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教功能一在很多现实案例中，登陆或者注册页面里面的输入框里面会有一些提示信息，然后点击输入框进行输入内容时，这些提示文字则消失。下面用代码来实现 <!DOCTYPE html> <html lang="en"> <head> <meta ch

我的Web学习之路1——input,textarea获得/失去焦点时隐藏/显示文字

Lucas-LearningPath

10-06

1250

input,textarea获得/失去焦点时隐藏/显示文字

js文本框点击时文字消失，失去焦点…

familycode的专栏

11-20

1411

方法一，直接在input中直接方法二, 代码如下复制代码方法三，利用jquery实现代码如下复制代码聚焦型提示语消失 js特效大全网注册

input 输入框获得/失去焦点时隐藏/显示文字

多一点点的专栏

08-21

2911

//获取焦点，取消焦点 $('.txt').bind({ focus:function(){ if (this.value == this.defaultValue){ this.value=""; } }, blur:function(){ if (this.value == ""){ this.value = this.defaultValue

关于输入框得到焦点时文本框清空,失去焦点时又显示默认文字，值发生改变时不再恢复默认文字的两种方法

wyz1978154331的专栏

08-19

6047

第一种方法：第二种方法： 文本框点击时文字消失，失去焦点时文字出现 function addListener(element,e,fn) { if(element.addE

JS实现input文本框点击清空及失去焦点恢复默认值

"js实现input文本框点击时文字消失，失去焦点" 在网页设计中，我们经常需要对用户交互进行定制，比如当用户点击输入框时，预设的文字（如“请输入姓名”）应该消失，让用户能够开始输入自己的内容。而当用户离开这...