整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
未休息，感覺沒啥可寫的，就水一篇文章吧，說一說前端 html 頁(yè)面中 input 元素中在沒有值的情況下，添加提示的文字，當(dāng)要輸入文字的時(shí)候，提示的文字消失。
關(guān)于 html input 輸入框的提示文字，有兩種方法可以實(shí)現(xiàn)，一種為 input 元素的 placeholder 屬性，一種為 js 方法。
placeholder：屬性提供可描述輸入字段預(yù)期值的提示信息
語法：
<input placeholder="提示的文字">
例：input 添加提示的文字
代碼：
<input type="text" placeholder="這里是提示的文字">
運(yùn)行結(jié)果：
當(dāng)input輸入框，輸出文字時(shí)，提示的文字信息會(huì)消失
示例代碼：
<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
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
