`
bolinyang
  • 浏览: 76010 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jQuery模拟placeholder属性

阅读更多
一.概述
在使用HTML的input元素时,经常会用到placeholder属性。但是IE8不支持这个placeholder属性,有点悲催,只能使用js来模拟这个placeholder了

二.模拟placeholder的js代码
if(!$.support.placeholder) {
	var els = $('input[placeholder],textarea[placeholder]');
	els.each(function(i, el) {
		el = $(el);
		var defValue = el.attr('placeholder'),
			defColor = el.css('color');
		el.bind('focus',function() {
			if(this.value === '' || this.value === defValue) {
				$(this).css('color', defColor);
				this.value = '';
			}
		});
		el.bind('blur',function() {
			if(this.value === '' || this.value === defValue) {
				$(this).css('color','#aaa');
				this.value = defValue;
			}
		});
		el.triggerHandler('blur');

		el.closest('form').submit(function(){
			var val = el.val();
			if(val === defValue){
				el.val('');
			}
		});
	});
}
分享到:
评论

相关推荐

    jquery模拟HTML5的PLACEHOLDER属性的插件

    Placeholder是HTML5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。如: <input name="username" type="text" placeholder=...

    jquery placeholder

    `jQuery Placeholder`的工作原理是通过JavaScript模拟`placeholder`的效果。它会在页面加载完成后查找所有带有`placeholder`属性的输入元素,然后将这些占位符文本作为提示显示在输入框内。当用户聚焦输入框并开始...

    jquery.placeholder.js:IE下实现HTML5 input标签的placeholder属性的jQuery插件

    这是一个用来在IE10之前的IE浏览器下模拟HTML5 input标签的placeholder属性的插件,用上它只需要在input标签中写上placeholder属性即可,还实现了placeholder的内容字体颜色和IE相同的功能。值得注意的是jquery版本...

    jquery 判断是否支持Placeholder属性的方法

    为了在使用jQuery时判断浏览器是否支持Placeholder属性,我们可以通过编写一个简单的函数来实现。这个函数利用了JavaScript原生的属性检测方法。Placeholder属性是HTML5的一部分,允许开发者在表单的input元素上显示...

    placeholder效果的jQuery插件,支持IE6、IE7

    标题中的“placeholder效果的jQuery插件,支持IE6、IE7”指的是一个专门用于处理HTML5 placeholder属性的jQuery扩展,这个插件使得在不支持HTML5的旧版Internet Explorer(如IE6和IE7)中也能实现类似的功能。...

    解决IE下不支持placeholder属性

    总结起来,解决IE浏览器不支持`placeholder`属性的问题主要依赖于JavaScript,通过监听输入框的焦点和失去焦点事件来模拟`placeholder`的效果。同时,可以结合Bootstrap的样式来优化视觉体验。无论选择哪种方法,都...

    jQuery placeholder实现源码(兼容所有浏览器)

    总结来说,jQuery `placeholder`实现的源码主要是通过模拟`placeholder`属性来达到在所有浏览器中的兼容性。它通过监听`focus`和`blur`事件,动态地添加和移除提示文本,确保用户能够顺畅地与输入框交互。对于不支持...

    使用jQuery快速解决input中placeholder值在ie中无法支持的问题

    如果不支持,我们将遍历页面中的所有input元素,并对每一个具有placeholder属性的text类型input元素添加模拟功能。当用户点击输入框时,如果输入框的值与placeholder值相同,则清空输入框;当输入框失去焦点且为空时...

    IE7 浏览器处理 兼容 input placeholder.zip

    // 如果浏览器不支持placeholder属性,jQuery.placeholder插件会自动处理 }); ``` 在这个例子中,CSS代码定义了`placeholder`文本的默认样式,使其在未聚焦时呈现灰色。当文档加载完成并执行jQuery代码后,`...

    IE8支持的placeholder组件

    这段代码会在文档加载完成后,找到所有带有`placeholder`属性的`input`和`textarea`元素,并为它们添加模拟的`placeholder`效果。 在压缩包文件`jquery-placeholder-master`中,你将找到该组件的源代码、示例、文档...

    input的placeholder属性兼容ie8 优化版

    `placeholder` 属性的原生支持始于 HTML5,因此,对于那些不支持 HTML5 的浏览器,如 IE8 和 IE9,我们需要通过 JavaScript 或 jQuery 插件来模拟这一功能。在描述中提到的方法是通过创建一个 `<span>` 元素来显示...

    IE兼容placeholder js

    描述中提到的“完美兼容H5 placeholder属性在IE9及以下版本的问题”,意味着这个解决方案能够有效地在不支持`placeholder`属性的IE浏览器上模拟出相同的效果。"自测可用,修改点少"表示这个解决方案经过了实际测试,...

    两种方法基于jQuery实现IE浏览器兼容placeholder效果

    由于IE早期版本不支持placeholder属性,所以需要使用jQuery来实现兼容效果。在介绍的两种方法中,第一种方法能够实现IE11的placeholder效果(输入框获得焦点时提示文字消失),第二种方法则可以实现类似Chrome的...

    ie6 7 8兼容html5属性placeholder

    1. 使用jQuery插件(如`jquery.placeholder.js`)或编写JavaScript代码来模拟`placeholder`行为。 2. 为不支持`placeholder`的浏览器设置`onfocus`和`onblur`事件。 3. 检查并更新CSS,以确保提示文本在不同浏览器中...

    placeholder效果

    // 初始化所有带placeholder属性的输入框和文本域 }); ``` 这段代码首先检查输入元素是否原生支持`placeholder`属性,如果不支持,则通过jQuery扩展方法`placeholder`来实现模拟。在页面加载完成后,会自动对所有`...

    jQuery实现的一个自定义Placeholder属性插件

    【jQuery实现自定义Placeholder属性插件】 在HTML5中,`placeholder`属性为文本框提供了一个非常方便的功能,即在输入框内显示提示文本,但遗憾的是,直到IE9,Internet Explorer浏览器都不支持这一特性。为了解决...

    基于JS实现html中placeholder属性提示文字效果示例

    <title>jQuery实现placeholder属性效果 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> ;" data-value="请输入姓名" id="inpt" type="text" /> function placeHolder(event) { var self...

    input中placeholder在Ie上兼容

    对于`placeholder`属性的支持,我们可以使用jQuery插件来模拟这个功能。 以下是一个简单的jQuery插件示例,用于在不支持`placeholder`属性的IE浏览器中实现类似的功能: ```javascript (function($){ // 检查...

Global site tag (gtag.js) - Google Analytics