Jquery简单的placeholder效果
2014-06-01 09:44
183 查看
Jquery简单的placeholder效果
由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考!
先看看效果吧![b]如下JSFiddle地址[/b]
[b] 查看效果链接[/b]
[b]JS代码如下:[/b]
[b]HTML代码如下:[/b]
[b]代码初始化:[/b]
由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考!
先看看效果吧![b]如下JSFiddle地址[/b]
[b] 查看效果链接[/b]
[b]JS代码如下:[/b]
/* * JS placeholder * IE6-IE9不支持HTML5中的placeholder */ function Placeholder(options) { this.config = { defaultColor: '#ccc', curColor: '#333', targetElem: '.placeholderCls' }; this.init(options); } Placeholder.prototype = { constructor:Placeholder, init: function(options){ this.config = $.extend(this.config, options || {}); var self = this, _config = self.config; $(_config.targetElem).each(function(){ var supportPlaceholder = 'placeholder' in document.createElement('input'); if(!supportPlaceholder) { var defaultValue = $(this).attr('placeholder'); $(this).focus(function(){ var pattern = new RegExp("^" + defaultValue + "$|^$"); pattern.test($(this).val()) && $(this).val('').css('color',_config.curColor); }).blur(function(){ if($(this).val() == defaultValue) { $(this).css('color',_config.defaultColor); }else if($(this).val().length == 0){ $(this).val(defaultValue).css('color', _config.defaultColor); } }).trigger('blur'); } }); } };
[b]HTML代码如下:[/b]
<form id="form1"> <h3>通过value方式模拟placeholder</h3> <p> <label for="username1">用户名:</label> <input type="text" class="placeholderCls" placeholder="请输入用户名"> </p> <p> <label for="address1">地 址:</label> <input type="text" class="placeholderCls" placeholder="请输入地址"> </p> <p> <label for="remarks1">备 注:</label> <textarea placeholder="请输入备注" class="placeholderCls"></textarea> </p> </form>
[b]代码初始化:[/b]
<script> new Placeholder({}); </script>
相关文章推荐
- 简单JS实现走马灯效果的文字(无需jQuery)
- jquery (show,fadeOut,Animate)简单效果
- 用jquery写的简单tab效果
- JQuery实现的简单标签选项卡效果
- 简单的jquery拖拽排序效果实现代码
- 用jQuery实现最简单的滚屏效果
- jQuery简单tab效果
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- 强大的jquery插件jqeuryUI做网页对话框效果!简单
- 简单jQuery效果
- jquery (show,fadeOut,Animate)简单效果
- [简单分页]C#+JQUERY+ORACLE分页效果 ----转载
- jQuery简单改进实现google suggest效果
- jquery的一个简单的渐变效果
- 基于Jquery的简单图片切换效果
- Jquery中幻灯片效果的简单实现
- jQuery:简单6行代码实现tab效果
- 基于JQuery的一个简单的鼠标跟随提示效果
- jquery实现简单的手风琴效果
- jquery简单实现微博广场下滑效果