未休息，感觉没啥可写的，就水一篇文章吧，说一说前端 html 页面中 input 元素中在没有值的情况下，添加提示的文字，当要输入文字的时候，提示的文字消失。

关于 html input 输入框的提示文字，有两种方法可以实现，一种为 input 元素的 placeholder 属性，一种为 js 方法。

input 元素的 placeholder 属性

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

语法：

<input placeholder="提示的文字">

例：input 添加提示的文字

代码：

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

运行结果：

当input输入框，输出文字时，提示的文字信息会消失

js 方法添加 input 元素提示文字

示例代码：

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

运行结果：

注：

1、js 方法添加的提示文字不同于 使用 placeholder 属性添加的效果

2、placeholder 属性添加的提示文字，只有输入内容时文字才会消失

3、js 方式添加的提示文字，当光标定位到 input 输入框中时，提示文字就会消失

、警告框（alert / window.alert）

alert("文本");

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

2、确认框（confirm / window.confirm）

confirm("文本")

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

prompt（text，defaulText）；输入文字对话框，text：对话框显示纯文本（而不是HTML格式文本）；defaultText，默认文本。

3、提示框（prompt / window.prompt）

prompt("文本","默认值")

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

注：弹出框换行用“ /n ”;

4、console.log();控制台打印内容；

推荐阅读：

JavaScript基础知识系列：不再彷徨：完全弄懂JavaScript中的this

面试：JavaScript基础篇

JavaScript基础知识系列：判断类型（上）

js 中原型和原型链深入理解

用方法：

调用initMessagebox(“要显示的文字”)方法即可

<!--信息框-->
<div id="messagebox"></div>
<!--Load Jquery-->
 <script src="js/jquery-1.11.3.min.js"></script>
 <script>
 /*提示信息框动态效果*/
 var messageboxT;
 var top1 = 10;
 var opacity = 0;
 //初始化数据
 function initMessagebox(info) {
 top1 = 10;
 opacity = 0;
 opacity1 = 1;
 $("#messagebox").html(info);
 $("#messagebox").css({ 'display': 'block' });
 appearMessagebox();
 }
 //出现信息框
 function appearMessagebox() {
 top1 += 1;
 opacity += 0.05;
 if (opacity < 1) {
 messageboxT = setTimeout("appearMessagebox()", 15);
 }
 else {
 disappearMessagebox();
 }
 $("#messagebox").css({ 'top': String(top1) + 'px' });
 $("#messagebox").css({ 'opacity': String(opacity) });
 }
 //隐藏信息框
 function disappearMessagebox() {
 opacity -= 0.05;
 if (opacity > 0.05) {
 messageboxT = setTimeout("disappearMessagebox()", 40);
 }
 else {
 opacity = 0;
 $("#messagebox").css({ 'display': 'none' });
 }
 $("#messagebox").css({ 'opacity': String(opacity) });
 }
 </script>

用到的css