html 文本框提示（input提示、text提示、提示文字提示、点击时提示消失）placeholder属性、value属性、js onfocus方法、onblur方法

Dontla

已于 2023-07-22 01:47:43 修改

阅读量1.4w

点赞数 5

分类专栏：前端 python-flask 文章标签： html 前端 javascript

于 2023-07-22 01:45:38 首次发布

本文链接：https://blog.csdn.net/Dontla/article/details/131862476

版权

50 篇文章

订阅专栏

20 篇文章

订阅专栏

文章介绍了在HTML中为input文本框添加提示文字的两种方法。一是使用placeholder属性，当输入内容时提示文字自动消失。二是利用JS的onfocus和onblur事件来动态控制提示文字的显示与隐藏，同时指出了单纯使用js方法的bug并提供了修复方案。

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

html input文本框中在没有值的情况下，添加提示的文字，当要输入文字的时候，提示的文字消失。关于html文本框input输入框的提示文字，有两种方法可以实现。一种为 input 元素的 placeholder 属性，一种为 js 方法。

placeholder：属性提供可描述输入字段预期值的提示信息

语法：

＜input placeholder="提示的文字"＞

例：input 添加提示的文字

代码：

<input type="text" placeholder="这里是提示的文字">

运行结果：当input输入框，输出文字时，提示的文字信息会消失

在这里插入图片描述

示例代码：

<input type="text" onfocus="javascript:if(this.value=='请输入内容')this.value='';">

运行结果：

在这里插入图片描述

注：

1）js 方法添加的提示文字不同于使用 placeholder 属性添加的效果
2）placeholder 属性添加的提示文字，只有输入内容时文字才会消失
3）js 方式添加的提示文字，当光标定位到 input 输入框中时，提示文字就会消失

示例代码：

<input type="text" onfocus="javascript:if(this.value=='')this.placeholder='';"
    onblur="javascript:this.placeholder='请输入内容';" placeholder="请输入内容">

运行结果：

在这里插入图片描述