placeholder实现的两种⽅式
/**
* PlaceHolder组件
* $(input).placeholder({
*  word:    // @string 提⽰⽂本
*  color:    // @string ⽂本颜⾊
*  evtType:  // @string focus|keydown 触发placeholder的事件类型
* })
*
* NOTE：
*  evtType默认是focus，即⿏标点击到输⼊域时默认⽂本消失，keydown则模拟HTML5 placeholder属性
在Firefox/Chrome⾥的特征，光标定位到输⼊域后键盘输⼊时默认⽂本才消失。 *  此外，对于HTML5 placeholder属性，IE10+和Firefox/Chrome/Safari的表现形式也不⼀致，因此内部实现不采⽤原⽣placeholder属性
*/
$.fn.placeholder = function(option, callback) {
var settings = $.extend({
word: '',
color: '#ccc',
evtType: 'focus'
}, option)
function bootstrap($that) {
// some alias
var word    = settings.word
var color  = lor
var evtType = settings.evtType
// default
var defColor = $that.css('color')
var defVal  = $that.val()
if (defVal == '' || defVal == word) {
$that.css({color: color}).val(word)
} else {
$that.css({color: defColor})
}
function switchStatus(isDef) {
if (isDef) {
$that.val('').css({color: defColor})
} else {
$that.val(word).css({color: color})
}
}
function asFocus() {
$that.bind(evtType, function() {
var txt = $that.val()
if (txt == word) {
switchStatus(true)
}
}).bind('blur', function() {
var txt = $that.val()
if (txt == '') {
switchStatus(false)
}
})
}
function asKeydown() {
$that.bind('focus', function() {
var elem = $that[0]
var val  = $that.val()
if (val == word) {
setTimeout(function() {
// 光标定位到⾸位
$that.setCursorPosition({index: 0})
}, 10)
}
})
}
if (evtType == 'focus') {
input标签placeholder属性
asFocus()
} else if (evtType == 'keydown') {
asKeydown()
}
// keydown事件⾥处理placeholder
$that.keydown(function() {
var val = $that.val()
if (val == word) {
switchStatus(true)
}
}).keyup(function() {
var val = $that.val()
if (val == '') {
switchStatus(false)
$that.setCursorPosition({index: 0})
}
})
}
return this.each(function() {
var $elem = $(this)
bootstrap($elem)
if ($.isFunction(callback)) callback($elem)
})
}
$.fn.placeholder = function(option, callback) {
var settings = $.extend({
word: '',
color: '#999',
evtType: 'focus',
zIndex: 20,
diffPaddingLeft: 3
}, option)
function bootstrap($that) {
/
/ some alias
var word    = settings.word
var color  = lor
var evtType = settings.evtType
var zIndex  = settings.zIndex
var diffPaddingLeft = settings.diffPaddingLeft
// default css
var width      = $that.outerWidth()
var height      = $that.outerHeight()
var fontSize    = $that.css('font-size')
var fontFamily  = $that.css('font-family')
var paddingLeft = $that.css('padding-left')
// process
paddingLeft = parseInt(paddingLeft, 10) + diffPaddingLeft // redner
var $placeholder = $('<span class="placeholder">')
$placeholder.css({
position: 'absolute',
zIndex: '20',
color: color,
width: (width - paddingLeft) + 'px',
height: height + 'px',
fontSize: fontSize,
paddingLeft: paddingLeft + 'px',
fontFamily: fontFamily
}).text(word).hide()
// 位置调整
move()
// textarea 不加line-heihgt属性
if ($that.is('input')) {
$placeholder.css({
lineHeight: height + 'px'
})
}
$placeholder.appendTo(document.body)
// 内容为空时才显⽰，⽐如刷新页⾯输⼊域已经填⼊了内容时var val = $that.val()
if ( val == '' && $that.is(':visible') ) {
$placeholder.show()
}
function hideAndFocus() {
$placeholder.hide()
$that[0].focus()
}
function move() {
var offset = $that.offset()
var top    = p
var left  = offset.left
$placeholder.css({
top: top,
left: left
})
}
function asFocus() {
$placeholder.click(function() {
hideAndFocus()
// 盖住后⽆法触发input的click事件，需要模拟点击下                setTimeout(function(){
$that.click()
}, 100)
})
// IE有些bug，原本不⽤加此句
$that.click(hideAndFocus)
$that.blur(function() {
var txt = $that.val()
if (txt == '') {
$placeholder.show()
}
})
}
function asKeydown() {
$placeholder.click(function() {
$that[0].focus()
})
}
if (evtType == 'focus') {
asFocus()
} else if (evtType == 'keydown') {
asKeydown()
}
$that.keyup(function() {
var txt = $that.val()
if (txt == '') {
$placeholder.show()
} else {
$placeholder.hide()
}
})
// 窗⼝缩放时处理
$(window).resize(function() {
move()
})
// cache
$that.data('el', $placeholder)
$that.data('move', move)
}
return this.each(function() {
var $elem = $(this)
bootstrap($elem)
if ($.isFunction(callback)) callback($elem)
})
}
两种⽅式的思路
1. (⽅式⼀)使⽤input的value作为显⽰⽂本
2. (⽅式⼆)不使⽤value，添加⼀个额外的标签（span）到body⾥然后绝对定位覆盖到input上⾯
两种⽅式各有优缺点，⽅式⼀占⽤了input的value属性，表单提交时需要额外做⼀些判断⼯作，⽅式⼆则使⽤了额外的标签。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。