`
pigaps
  • 浏览: 447 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

placeholder兼容

阅读更多
//兼容placeholder nodes: 需要兼容的元素,placeholder里面字体的颜色
    function placeholder(nodes, itemColor) {
        /**
         * 判断浏览器是否支持placeholder
         *  !("placeholder" in document.createElement("input") ----浏览器不支持placeholder属性
         */
        if (nodes.length && !("placeholder" in document.createElement("input"))) {
            for (var i = 0; i < nodes.length; i++) {//遍历需要添加placeholder的元素
                var self = nodes[i],
                        placeholder = self.getAttribute('placeholder') || '';//获取placeholder属性的值
                //绑定onfocus事件(焦点事件:清空placeholder的值和颜色)
                self.onfocus = function () {
                    if (self.value == placeholder) {
                        self.value = '';
                        self.style.color = '';
                    }
                }
                //绑定onblur事件(赋值和添加颜色)
                self.onblur = function () {
                    if (self.value == "") {
                        self.value = placeholder;
                        self.style.color = itemColor;
                    }
                }
                //没有点击事件时
                self.value = placeholder;//赋值
                self.style.color = itemColor;//添加颜色
            }
        }
    }
    var item = document.getElementsByTagName('input');
    placeholder(item, "red");
分享到:
评论

相关推荐

    IE8 placeholder 兼容使用插件(可兼容password类型input)

    IE8 placeholder 兼容使用插件。可兼容password类型,可以正常显示提示字。

    IE兼容placeholder js

    标签“js placeholder IE兼容”进一步确认了我们讨论的主题,即使用JavaScript来处理`placeholder`属性的IE兼容性问题。JavaScript可以用来检测浏览器类型和版本,然后在不支持`placeholder`属性的IE浏览器中动态...

    input中placeholder在Ie上兼容

    至于压缩包中的"xmls"文件,根据名称推测可能是一些XML相关的文件,但具体内容和本问题的"input中placeholder在Ie上兼容"知识点没有直接关系,所以在此不做深入讨论。如果你需要关于XML的相关知识,可以提供更具体的...

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

    `jQuery`作为一个广泛使用的JavaScript库,可以用来为这些不支持`placeholder`属性的浏览器提供兼容性解决方案。本文将深入解析一个使用jQuery实现`placeholder`功能的源码,并探讨其工作原理。 首先,让我们理解`...

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

    标题中的"IE7浏览器处理兼容input placeholder"是指如何在不支持`placeholder`属性的IE7浏览器中模拟这一功能。这个问题的解决方案通常依赖于JavaScript库,例如在给定的压缩包中包含的`jquery.placeholder.min.js`...

    处理IE不兼容placeholder的JS文件

    处理IE不兼容placeholder的JS文件

    input的placeholder属性兼容ie8 优化版

    总之,要实现 `input` 的 `placeholder` 属性在 IE8 和 IE9 的兼容,我们需要借助 JavaScript 来模拟其行为。通过创建一个显示提示文本的 `&lt;span&gt;` 元素,并监听用户的输入和点击事件,我们可以为这些老版本的 IE ...

    登录表单兼容placeholder的方法

    总之,为确保登录表单的`placeholder`功能在所有浏览器上都能正常工作,开发者需要关注兼容性问题,并选择合适的方法或工具来实现这一功能。通过JavaScript模拟`placeholder`属性,可以有效地解决这个问题,提高用户...

    实现跨浏览器的placeholder,兼容IE7

    为了实现跨浏览器的`placeholder`兼容性,开发者通常需要借助JavaScript库或jQuery插件来模拟这一功能。本篇将探讨如何实现这一目标,同时分析提供的文件内容。 首先,`form4_placehold_value.html`很可能是测试...

    input的placeholder属性兼容ie8

    用span标签定位到placeholder位置,用jq控制span的显示和隐藏。

    ie6 7 8兼容html5属性placeholder

    总结起来,为了让IE6、7、8兼容HTML5的`placeholder`属性,可以采用以下步骤: 1. 使用jQuery插件(如`jquery.placeholder.js`)或编写JavaScript代码来模拟`placeholder`行为。 2. 为不支持`placeholder`的浏览器...

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

    为了改善用户体验,可以通过jQuery插件或脚本实现跨浏览器的placeholder兼容。 本文将详细介绍两种利用jQuery库快速解决input中placeholder值在IE浏览器中无法支持的方法。首先,了解在IE中placeholder无法显示的...

    全兼容input/textarea标签的placeholder属性JS插件

    该插件完整兼容placeholder属性。插件由原生JS编写,无需任何其他插件支持,并且使用简单,只需一行JS调用即可。 博客地址:http://blog.csdn.net/qq_17076445/article/details/78212240

    jquery.placeholder.js

    使用该插件(jquery.placeholder.js)解决IE9及以版本下对placeholder的兼容性问题

    ie8兼容placeholder.zip

    总的来说,处理IE8的`placeholder`兼容问题主要依赖于JavaScript和jQuery插件,通过这些方法,我们可以使旧版浏览器也能享受到现代Web开发带来的便利性。尽管现在大部分用户都已经升级到更现代的浏览器,但在某些...

    IE浏览器支持placeholder

    针对IE浏览器对`placeholder`属性的不兼容问题,开发者通常会采用JavaScript(JS)插件来实现兼容性处理。这些插件通过JavaScript代码模拟`placeholder`的效果,使得在IE浏览器上也能呈现类似的功能。文件名...

    IE8支持的placeholder组件

    因此,在现代项目中,我们更倾向于使用支持`placeholder`的现代浏览器,或者结合polyfill库来实现跨浏览器兼容。然而,对于仍需支持IE8的项目,`jquery-placeholder`无疑是一个可靠的解决方案。

    placeholder:IE5.5~9 的 polyfill 不支持占位符功能

    全局设置placeholder.attr :指定占位符特性名称,默认为数据占位符placeholder.color :指定占位符的文字前景色,默认为#888 用法: &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;input...

    placeholder效果

    然而,遗憾的是,`placeholder` 属性在 Internet Explorer 8 及以下版本中并未得到支持,这给那些仍需兼容旧版浏览器的开发者带来了挑战。 为了解决这个问题,我们可以采用一些JavaScript库或者自定义JavaScript...

    placeholder(HTML 5) IE 兼容插件

    在实际开发中,考虑到性能和代码维护性,现代项目更倾向于使用成熟的库,如`jQuery.placeholder`或`Modernizr.input.placeholder`等,这些库已经被广泛测试,可以更好地处理各种浏览器兼容性问题。但了解这些插件的...

Global site tag (gtag.js) - Google Analytics