整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
未休息，感覺沒啥可寫的，就水一篇文章吧，說一說前端 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 輸入框中時，提示文字就會消失
、警告框（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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
