未休息，感覺沒啥可寫的，就水一篇文章吧，說一說前端 html 頁(yè)面中 input 元素中在沒有值的情況下，添加提示的文字，當(dāng)要輸入文字的時(shí)候，提示的文字消失。

關(guān)于 html input 輸入框的提示文字，有兩種方法可以實(shí)現(xiàn)，一種為 input 元素的 placeholder 屬性，一種為 js 方法。

input 元素的 placeholder 屬性

placeholder：屬性提供可描述輸入字段預(yù)期值的提示信息

語法：

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

例：input 添加提示的文字

代碼：

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

運(yùn)行結(jié)果：

當(dāng)input輸入框，輸出文字時(shí)，提示的文字信息會(huì)消失

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

示例代碼：

<input type="text" onfocus="javascript：if(this.value=='請(qǐng)輸入內(nèi)容')this.value='';">

運(yùn)行結(jié)果：

注：

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

2、placeholder 屬性添加的提示文字，只有輸入內(nèi)容時(shí)文字才會(huì)消失

3、js 方式添加的提示文字，當(dāng)光標(biāo)定位到 input 輸入框中時(shí)，提示文字就會(huì)消失

、警告框（alert / window.alert）

alert("文本");

警告框經(jīng)常用于確保用戶可以得到某些信息。

當(dāng)警告框出現(xiàn)后，用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。

2、確認(rèn)框（confirm / window.confirm）

confirm("文本")

確認(rèn)框用于使用戶可以驗(yàn)證或者接受某些信息。

當(dāng)確認(rèn)框出現(xiàn)后，用戶需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作。

如果用戶點(diǎn)擊確認(rèn)，那么返回值為 true。如果用戶點(diǎn)擊取消，那么返回值為 false。

prompt（text，defaulText）；輸入文字對(duì)話框，text：對(duì)話框顯示純文本（而不是HTML格式文本）；defaultText，默認(rèn)文本。

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

prompt("文本","默認(rèn)值")

提示框經(jīng)常用于提示用戶在進(jìn)入頁(yè)面前輸入某個(gè)值。

當(dāng)提示框出現(xiàn)后，用戶需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。

如果用戶點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶點(diǎn)擊取消，那么返回值為 null。

注：彈出框換行用“ /n ”;

4、console.log();控制臺(tái)打印內(nèi)容；

推薦閱讀：

JavaScript基礎(chǔ)知識(shí)系列：不再彷徨：完全弄懂JavaScript中的this

面試：JavaScript基礎(chǔ)篇

JavaScript基礎(chǔ)知識(shí)系列：判斷類型（上）

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

用方法：

調(diào)用initMessagebox(“要顯示的文字”)方法即可

<!--信息框-->
<div id="messagebox"></div>
<!--Load Jquery-->
 <script src="js/jquery-1.11.3.min.js"></script>
 <script>
 /*提示信息框動(dòng)態(tài)效果*/
 var messageboxT;
 var top1 = 10;
 var opacity = 0;
 //初始化數(shù)據(jù)
 function initMessagebox(info) {
 top1 = 10;
 opacity = 0;
 opacity1 = 1;
 $("#messagebox").html(info);
 $("#messagebox").css({ 'display': 'block' });
 appearMessagebox();
 }
 //出現(xiàn)信息框
 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