在web的開發中有的時候我們需要用戶登錄註冊頁面
需要在輸入框的裏面有灰色字體進行提示
我之前都是使用複雜的JavaScript來實現
實現點擊出現字符出現與消失
以及字符的顏色在灰色和黑色中變換
特別是密碼輸入框中需要涉及到兩個輸入框的顯示與隱藏
非常麻煩
但是使用了placeholder佔位符就不一樣了
可以方便快捷的實現這個功能
示例代碼：
<body>
<div id="div1">
<div style="position: relative;">
<img src="../img/headportrait-login-register.png" class="img1">
<input id="button_login" class="button1" type="button" value="登錄" style="color:#E59A00" οnclick="login_onclick()">
<input id="button_register" class="button1" type="button" value="註冊" style="color: black;" οnclick="register_onclick()">
</div>
<div class="line"></div>
<div id="user_register" style="display: none;">
<input placeholder="用戶名" id="user_register_username" name="用戶名" class="input1" type="text" />
<input placeholder="郵箱/手機號" id="user_register_contact" name="郵箱/手機號" class="input1" type="text" />
<input placeholder="密碼" id="user_register_password" name="密碼1" class="input1" type="password" />
<input placeholder="確認密碼" id="user_register_ensurepassword" name="確認密碼1" class="input1" type="password" />
<input placeholder="驗證碼" name="驗證碼" class="securitycode" type="text" /><input value="獲取驗證碼" class="securitycode_made" type="button"><br>
<input value="同意協議並註冊" name="同意協議並註冊" class="agreement" type="radio"><span class="agreement">同意協議並註冊</span><br>
<input value="註冊" id="user_register_button" class="button2" type="button" οnclick="ajax_user_register()" />
</div>
<form id="merchant_register" style="display: none">
<input placeholder="用戶名" value="" name="用戶名" class="input1" type="text" />
<input placeholder="郵箱/手機號" value="" name="郵箱/手機號" class="input1" type="text" />
<input placeholder="密碼" value="" name="密碼3" class="input1" type="password" />
<input placeholder="確認密碼" value="" name="確認密碼3" class="input1" type="password" />
<input placeholder="驗證碼" value="" name="驗證碼" class="securitycode" type="text"><input value="獲取驗證碼" class="securitycode_made" type="button"><br>
<!-- style="color: #747474;"-->
<div class="havefile" id="leftfile">
<input name="店鋪門面照" class="file" id="photo" type="file">
<span class="infile">店鋪門面照</span>
</div>
<div class="havefile" id="rightfile">
<input name="經營許可證" class="file" type="file">
<span class="infile">經營許可證</span>
</div><br>
<input value="同意協議並註冊" name="同意協議並註冊" class="agreement" type="radio"><span class="agreement">同意協議並註冊</span><br>
<input value="註冊" type="submit" class="button2">
</form>
<form id="login" style="display: block;">
<input placeholder="用戶名/郵箱/手機號" id="login_username_email_mobilephone" name="用戶名/郵箱/手機號" class="input2" type="text">
<input placeholder="密碼" id="login_password" name="密碼2" class="input2" type="password">
<input placeholder="驗證碼" name="驗證碼" class="securitycode" type="text"><input value="獲取驗證碼" class="securitycode_made" type="button"><br>
<input value="登錄" type="button" class="button2" style="margin-top: 20px;" οnclick="ajax_login()">
</form>
<div>
<input id="button_merchant" class="button1" type="button" value="商家" style="color: black;" οnclick="merchant_onclick()">
<input id="button_user" class="button1" type="button" value="用戶" style="color: rgb(229, 154, 0);" οnclick="user_onclick()">
</div>
</div>
</body>