html鼠标点击显示的文字消失,input点击后placeholder中的提示消息消失

提示文本

* 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 = settings.color

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') {

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)

})

}

属性

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 = offset.top

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初始隐藏

此时无法取到input的offset，继而无法定位span到input上面。

2. 包含input的页面dom结构发生变化

比如页面里删除了一些元素或添加了一些元素，导致input向上或向下偏移，而此时span则没有偏移(span相对body定位)。这比较恶心，可以考虑把span作为input的兄弟元素，即相对内层div定位(而不是body)。但这样必须强制给外层div添加position:relative，添加后可能会对页面布局产生一定影响。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！