解决方案 »
- js碰撞实现原理...征集精华.谢谢
- 如何取消a标签的超链接?
- 初学,求一段JS源码!急!
- 关于jQuery中的scrollTop方法
- 如何构造函数
- 金山的注册页面 不用提交可以检验 用户id是否被注册。。。里面有网站连接,谁帮我看看谢谢啊?要是知道告诉我,这是javascript的那方面的
- 这个脚本中的switch()怎么不能默认为一个值
- 关于:replace与RegEx
- JavaScript和VBScriptt共用的问题
- ######高分!!###### 老问题,2000个节点的树 ######################################
- 关于浏览器兼容性
- 吐槽一下各浏览器的不兼容性, 那帮人真是吃饱了撑的
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="jquery.html5-placeholder-shim.js"></script>
<title>无标题文档</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style></head><body> <input id="btn" type="text" placeholder="你好" />
<input type="password" placeholder="大家好" />
<textarea rows="8" cols="10" placeholder="为什么"></textarea>
<input type="button" value="显示" onmouseover="document.getElementById('xxx').style.display='block'" />
<div id="xxx" style="display: none;" >
<form>
<input type="password" placeholder="各位好1" />
<input type="password" placeholder="各位好2" />
<input type="password" placeholder="各位好3" />
</form>
</div>
</body>
</html><script type="text/javascript">
(function($) {
// @todo Document this.
$.extend($,{ placeholder: {
browser_supported: function() {
if(($.browser.msie && ($.browser.version="10.0")) || ($.browser.opera))
{
return false;
} return this._supported !== undefined ?
this._supported :
( this._supported = !!('placeholder' in $('<input type="text">')[0]) ); },
shim: function(opts) {
var config = {
color: '#f00',
cls: 'placeholder',
selector: 'input[placeholder], textarea[placeholder]'
};
$.extend(config,opts);
return !this.browser_supported() && $(config.selector)._placeholder_shim(config);
}
}}); $.extend($.fn,{
_placeholder_shim: function(config) {
function calcPositionCss(target)
{
var op = $(target).offsetParent().offset();
var ot = $(target).offset(); return {
top: ot.top - op.top,
left: ot.left - op.left,
width: $(target).width()
};
}
return this.each(function() {
var $this = $(this); if( $this.is(':visible') ) { if( $this.data('placeholder') ) {
var $ol = $this.data('placeholder');
$ol.css(calcPositionCss($this));
$this.attr('placeholder','');
return true;
} var possible_line_height = {};
if( !$this.is('textarea') && $this.css('height') != 'auto') {
possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' };
} var ol = $('<label />')
.text($this.attr('placeholder'))
.addClass(config.cls)
.css($.extend({
position:'absolute',
display: 'inline',
float:'none',
overflow:'hidden',
textAlign: 'left',
color: config.color,
cursor: 'text',
paddingTop: $this.css('padding-top'),
paddingRight: $this.css('padding-right'),
paddingBottom: $this.css('padding-bottom'),
paddingLeft: $this.css('padding-left'),
fontSize: $this.css('font-size'),
fontFamily: $this.css('font-family'),
fontStyle: $this.css('font-style'),
fontWeight: $this.css('font-weight'),
textTransform: $this.css('text-transform'),
backgroundColor: 'transparent',
zIndex: 99
}, possible_line_height))
.css(calcPositionCss(this))
.attr('for', this.id)
.data('target',$this)
.click(function(){
$(this).data('target').focus();
})
.insertBefore(this);
$this
.data('placeholder',ol)
.keypress(function(){
ol.hide();
})
.focus(function(){
ol.css('color','#dbdcdc');
})
.blur(function() {
ol[$this.val().length ? 'hide' : 'show']();
ol.css('color','#f00')//595757
}).triggerHandler('blur'); $(window)
.resize(function() {
var $target = ol.data('target');
ol.css(calcPositionCss($target));
});
}
});
}
});
})(jQuery);jQuery(document).bind('ready load', function() {
if (jQuery.placeholder) {
jQuery.placeholder.shim();
}
});</script>
请问大仙我的这段代码为何点击三次“显示”按钮才会成功执行。谢谢!<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script><title>无标题文档</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head><body> <input type="text" placeholder="你好" />
<input type="password" placeholder="大家好" />
<textarea rows="8" cols="10" placeholder="为什么"></textarea> <input id="btn" type="button" value="显示" /> <div id="xxx" style="display: none; " >
<form>
<input type="password" placeholder="各位好1" />
<input type="password" placeholder="各位好2" />
<input type="password" placeholder="各位好3" />
</form>
</div> <div>123456789</div>
</body>
</html>
<script type="text/javascript">
$("#btn").click(function(){
$("#xxx").show(0,jQuery.placeholder.shim());
});(function($) {
// @todo Document this.
$.extend($,{ placeholder: {
browser_supported: function() {
if(($.browser.msie && ($.browser.version="10.0")) || ($.browser.opera))
{
return false;
} return this._supported !== undefined ?
this._supported :
( this._supported = !!('placeholder' in $('<input type="text">')[0]) ); },
shim: function(opts) {
var config = {
color: '#f00', //595757
cls: 'placeholder',
selector: 'input[placeholder], textarea[placeholder]'
};
$.extend(config,opts);
return !this.browser_supported() && $(config.selector)._placeholder_shim(config);
}
}}); $.extend($.fn,{
_placeholder_shim: function(config) {
function calcPositionCss(target)
{
var op = $(target).offsetParent().offset();
var ot = $(target).offset(); return {
top: ot.top - op.top,
left: ot.left - op.left,
width: $(target).width()
};
}
return this.each(function() {
var $this = $(this); if( $this.is(':visible') ) { if( $this.data('placeholder') ) {
var $ol = $this.data('placeholder');
$ol.css(calcPositionCss($this));
$this.attr('placeholder','');
return true;
} var possible_line_height = {};
if( !$this.is('textarea') && $this.css('height') != 'auto') {
possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' };
} var ol = $('<label />')
.text($this.attr('placeholder'))
.addClass(config.cls)
.css($.extend({
position:'absolute',
display: 'inline',
float:'none',
overflow:'hidden',
textAlign: 'left',
color: config.color,
cursor: 'text',
paddingTop: $this.css('padding-top'),
paddingRight: $this.css('padding-right'),
paddingBottom: $this.css('padding-bottom'),
paddingLeft: $this.css('padding-left'),
fontSize: $this.css('font-size'),
fontFamily: $this.css('font-family'),
fontStyle: $this.css('font-style'),
fontWeight: $this.css('font-weight'),
textTransform: $this.css('text-transform'),
backgroundColor: 'transparent',
zIndex: 99
}, possible_line_height))
.css(calcPositionCss(this))
.attr('for', this.id)
.data('target',$this)
.click(function(){
$(this).data('target').focus();
})
.insertBefore(this);
$this
.data('placeholder',ol)
.keypress(function(){
ol.hide();
})
.focus(function(){
ol.css('color','#0f0'); //dbdcdc
})
.blur(function() {
ol[$this.val().length ? 'hide' : 'show']();
ol.css('color','#f00') //595757
}).triggerHandler('blur'); $(window)
.resize(function() {
var $target = ol.data('target');
ol.css(calcPositionCss($target));
});
}
});
}
});
})(jQuery);jQuery(document).add(window).bind('ready load', function() {
if (jQuery.placeholder) {
jQuery.placeholder.shim();
}
});</script>