JavaScript实现文本框和密码框placeholder效果(兼容ie8)
文本框:
方法一:
<input type="text" id="add-usbkey-authentication-modal-name" class="form-control"
value="长度为3-128的数字和字母" name="addUsbkeyAuthenticationModalName"
onfocus="if(value=='长度为3-128的数字和字母') {value=''}"
onblur="if (value=='') {value='长度为3-128的数字和字母'}"
/>
方法二:
<input type="text" name="hotGoods" id="search">
$(document).ready(function () {
$("#search").val('请输入您要搜索的内容').css('color', '#ccc');
replacePlaceholder($("#search"));
});
function replacePlaceholder(input) {
var originalvalue = input.val(); //请输入您要搜索的内容
// console.log(originalvalue);
input.focus(function () {
if ($.trim(input.val()) == originalvalue) {
input.css('color', '#333');
input.val('');
}
});
input.blur(function () {
if ($.trim(input.val()) == '') {
input.css('color', '#ccc');
input.val(originalvalue);
}
});
}
密码框:
<input type="text" value="长度为12-16的数字和字母" id="add-chap-modal-password-show" class="form-control"/>
<input type="password" id="add-chap-modal-password" style="display: none" name="addChapModalPassword" class="form-control"/>
$('#add-chap-modal-password-show').focus(function () {
var text_value = $(this).val();
if (text_value == this.defaultValue) {
$('#add-chap-modal-password-show').hide();
$('#add-chap-modal-password').show().focus();
}
});
$('#add-chap-modal-password').blur(function () {
var text_value = $(this).val();
if (text_value == "") {
$('#add-chap-modal-password-show').show();
$('#add-chap-modal-password').hide();
}
});