1:
<style>
.grey {
color: #999;
}
.blue {
color: blue;
}
</style>
<input id="t1" type="text" placeholder="请输入文字1" value="内容"/>
<input id="t2" type="text" placeholder="请输入文字2"/>
<input class="t2" type="text" placeholder="请输入文字3"/>
<input class="t2" type="text" placeholder="请输入文字4"/>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
//目前支持该属性的浏览器:Firefox4.0+、Chrome4.0+、Safari4.0+,Opera 11
/**
*
* @type {{_support: null, className: string, init: Function, create: Function, _setValue: Function, _moveCursor: Function}}
* 有两种调用方式
// 1)页面初始化时对所有input做初始化
PlaceHolder.className = 'blue'; //用于设这placeholder的className值;
PlaceHolder.init();
// 2)或者单独设置某个元素
PlaceHolder.create($('#t1'));
PlaceHolder.create($('#t2'));
PlaceHolder.create($('.t2'));
*/
PlaceHolder = {
_support: (function () {
return 'placeholder' in document.createElement('input');
})(),
// 提示文字的样式,需要在页面中其他位置定义
className: 'grey',
init: function () {
if (!PlaceHolder._support) {
var inputs = $('input');
PlaceHolder.create(inputs);
}
},
create: function (inputs) {
for (var i = 0, length = inputs.length; i < length; i++) {
var input = inputs.eq(i);
if (!PlaceHolder._support) {
PlaceHolder._setValue(input);
input.on('keydown', function () {
$(this).removeClass(PlaceHolder.className);
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
$(this).addClass(PlaceHolder.className);
}
});
input.on('keyup', function () {
$(this).removeClass(PlaceHolder.className);
if ($(this).val() === '') {
PlaceHolder._setValue($(this));
}
});
input.on('focus', function () {
if ($(this).val() === $(this).attr('placeholder')) {
PlaceHolder._moveCursor($(this));
}
})
}
}
},
_setValue: function (input) {
if ($.trim(input.val()) == '') {
input.addClass(PlaceHolder.className);
input.val(input.attr('placeholder'));
PlaceHolder._moveCursor(input);
} else {
input.removeClass(PlaceHolder.className);
}
},
_moveCursor: function (input) {
if (input.get(0).createTextRange()) {
var rng = input.get(0).createTextRange();
rng.move("character", 0);
rng.select();
}
}
}
PlaceHolder.className = 'blue';
PlaceHolder.init();
/*
// 页面初始化时对所有input做初始化
//PlaceHolder.className = 'blue'; //用于设这placeholder的className值;
//PlaceHolder.init();
// 或者单独设置某个元素
PlaceHolder.create($('#t1'));
PlaceHolder.create($('#t2'));
PlaceHolder.create($('.t2'));
*/
</script>
2:
<form id="form1">
<h3>在不支持placeholder的浏览器下,通过插入悬浮的span元素方式模拟</h3>
<p><label for="username1">用户名:</label><input type="text" name="username1" id="username1" placeholder="请输入用户名"
value="" required></p>
<p><label for="password1">密 码:</label><input type="password" name="password1" id="password1" placeholder="请输入密码"
value="" required></p>
<p><label for="address1">地 址:</label><input type="text" name="address1" id="address1" placeholder="请输入地址" value=""
required></p>
<p><label for="remarks1">备 注:</label><textarea placeholder="请输入备注" id="remarks1"></textarea></p>
</form>
<script src="jquery-1.9.1.js"></script>
<script>
var oForm1 = $('#form1');
var oForm1Inputs = $('#form1 input');
for (var i = 0; i < oForm1Inputs.length; i++) {
placeHolder(oForm1Inputs.eq(i));
}
var oForm1Textarea = $('textarea');
placeHolder(oForm1Textarea);
/**
* @name placeHolder
* @class 跨浏览器placeHolder,对于不支持原生placeHolder的浏览器
* @param {Object} obj 要应用placeHolder的表单元素对象
*/
function placeHolder(obj) {
if (!obj.attr('placeholder')) return;
var supportPlaceholder = 'placeholder' in document.createElement('input');
if (!supportPlaceholder) {
var defaultValue = obj.attr('placeholder');
var oWrapper = $('<div>'+defaultValue+'<div>');
var oMarginLeft = parseInt(obj.css('marginLeft')) ? parseInt(obj.css('marginLeft')) + 3 + 'px' : 3 + 'px';
var oMarginTop = parseInt(obj.css('marginTop')) ? obj.css('marginTop') : 1 + 'px';
var oPaddingLeft = obj.css('paddingLeft');
var oWidth = obj.outerWidth() - parseInt(obj.css('marginLeft')) + 'px';
var oHeight = obj.height + 'px';
var oLineHeight = obj.get(0).tagName.toLowerCase() == 'textarea' ? '' : obj.outerHeight() + 'px';
oWrapper.css({position:'absolute', color:'#ACA899', display:'inline-block', overflow:'hidden', fontFamily: obj.css('fromFamily'),
fontSize: obj.css('fontSize'), marginLeft:oMarginLeft, marginTop:oMarginTop, paddingLeft:oPaddingLeft, width:oWidth, height:oHeight, lineHeight:oLineHeight});
oWrapper.addClass('wrap-placeholder');
obj.before(oWrapper);
oWrapper.bind('click', function () {
obj.focus();
})
//绑定input或onpropertychange事件
/*
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,
在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。
*/
if (typeof(obj.get(0).oninput) == 'object') {
obj.get(0).addEventListener("input", changeHandler, false);
} else {
obj.get(0).onpropertychange = changeHandler;
}
function changeHandler() {
if($.trim(obj.val()) != ''){
oWrapper.hide();
}else{
oWrapper.show();
}
}
}
}
</script>