`
linhui_dragon
  • 浏览: 155994 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

小编辑 HTML5 的 placeholder属性

    博客分类:
  • JS
 
阅读更多
HTML5 的 PLACEHOLDER 属性\


HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现:

function hasPlaceholderSupport() {
	  return 'placeholder' in document.createElement('input');
	}


默认提示文字是灰色的,可以通过CSS来改变文字样式:
/* all */
::-webkit-input-placeholder { color:#f00; }
input:-moz-placeholder { color:#f00; }
 
/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
 
/* individual: mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }


兼容其他不支持placeholder的浏览器:

var PlaceHolder = {
    _support: (function() {
        return 'placeholder' in document.createElement('input');
    })(),
 
    //提示文字的样式,需要在页面中其他位置定义
    className: 'abc',
 
    init: function() {
        if (!PlaceHolder._support) {
            //未对textarea处理,需要的自己加上
            var inputs = document.getElementsByTagName('input');
            PlaceHolder.create(inputs);
        }
    },
 
    create: function(inputs) {
        var input;
        if (!inputs.length) {
            inputs = [inputs];
        }
        for (var i = 0, length = inputs.length; i <length; i++) {
            input = inputs[i];
            if (!PlaceHolder._support && input.attributes && input.attributes.placeholder) {
                PlaceHolder._setValue(input);
                input.addEventListener('focus', function(e) {
                    if (this.value === this.attributes.placeholder.nodeValue) {
                        this.value = '';
                        this.className = '';
                    }
                }, false);
                input.addEventListener('blur', function(e) {
                    if (this.value === '') {
                        PlaceHolder._setValue(this);
                    }
                }, false);
            }
        }
    },
 
    _setValue: function(input) {
        input.value = input.attributes.placeholder.nodeValue;
        input.className = PlaceHolder.className;
    }
};
 
//页面初始化时对所有input做初始化
//PlaceHolder.init();
//或者单独设置某个元素
//PlaceHolder.create(document.getElementById('t1'));







设计师应该拥有的 50 个很有用的 CSS 代码

http://www.oschina.net/question/5189_112117
分享到:
评论

相关推荐

    tinymce-placeholder:用于占位符属性支持的 TinyMCE 插件

    TinyMCE 的占位符文本插件 这个插件为 TinyMCE 编辑器带来了 HTML5 占位符属性功能。 用法 将插件脚本添加到页面 将“占位符”添加到 tinymce 配置插件数组。 像往常一样向 textarea 添加占位符属性。 享受!

    HTML5从入门到精通-中文学习教程.docx

    * 表单属性:HTML5的表单元素具有多种属性,例如placeholder、required等。 * 表单应用场景:HTML5的表单元素广泛应用于用户信息收集、表单验证等领域。 八、HTML5表单属性 * 表单属性:HTML5提供了多种表单属性,...

    html5特殊属性的实例

    以上只是HTML5特殊属性的一小部分,它们极大地增强了HTML的表达能力和功能性。通过这些属性,开发者可以创建更加动态、适应性强且用户友好的网页。在实际开发中,结合CSS和JavaScript,HTML5能够实现更丰富的交互和...

    HTML5(软件品牌)-1期 06 教学课件_单元1_HTML5新增的属性.pdf

    4. **placeholder属性**:`placeholder`属性为输入字段提供了预期值的提示文本,通常显示在输入框内,直到用户开始输入时消失。它适用于`text`、`search`、`url`、`tel`、`email`和`password`类型的`&lt;input&gt;`元素,...

    15种表单占位符placeholder动画jquery插件

    这段代码会在页面加载完成后,找到所有具有`placeholder`属性的输入元素,并应用foxholder.js插件,展示动画占位符效果。 此外,foxholder.js还具有良好的浏览器兼容性,它支持现代浏览器,同时也考虑到了对老版本...

    HTML5意见反馈提交表单页面模板.rar

    HTML5中的`&lt;textarea&gt;`元素用于创建多行文本输入,通过`rows`和`cols`属性定义其大小,而`placeholder`属性则可以设置提示文字。 2. **图片上传预览**:HTML5引入了`&lt;input type="file"&gt;`元素的`accept`属性,允许...

    HTML5全局属性和其他共4页.pdf.zip

    HTML5是现代网页开发的核心标准,它引入了许多新特性、元素和属性,极大地提升了Web开发的效率和用户体验。其中,HTML5的全局属性是一组通用的属性,可以在任何HTML元素上使用,为开发者提供了更大的灵活性和控制力...

    HTML 5标签、属性、事件及兼容性速查表

    ### HTML 5 标签、属性、事件及兼容性速查表 #### 概述 HTML 5(HyperText Markup Language 第五版)是万维网的核心语言之一,它不仅继承了HTML 4的优点,还增加了许多新特性,旨在使Web更加丰富、互动和多媒体化...

    html5基础教程常用技巧整理

    HTML5也支持在和元素中使用placeholder属性来设定占位符文本。当输入字段为空时,这个属性指定的值会显示在输入框内,起到提示作用,一旦用户开始输入,占位符文本就会消失。这对于提升用户交互体验非常有帮助。 ...

    HTML属性标签大全注释

    HTML5引入了许多新的属性,增强了网页的功能性和可用性: 1. `placeholder`:输入元素的提示文本。 2. `autofocus`:元素加载时自动获取焦点,如。 3. `autocomplete`:控制输入字段的自动完成功能。 4. `datetime`...

    用html5编辑网站

    在这个教程中,我们将深入探讨如何使用HTML5来编辑网站代码。 首先,了解HTML5的基本结构至关重要。一个基本的HTML5文档通常由`&lt;!DOCTYPE html&gt;`声明开始,接着是`&lt;html&gt;`元素,这是整个文档的根元素。在`&lt;html&gt;`...

    HTML5+CSS3超酷动态表单

    此外,HTML5还提供了`placeholder`属性,可以在输入框内设置提示文本,帮助用户了解应填写的信息。比如: ```html &lt;input type="text" placeholder="请输入您的邮箱地址"&gt; ``` 接着,我们用CSS3来实现动态高亮效果...

    contenteditable元素的placeholder输入提示语设置方法

    在Web开发中,contenteditable属性是HTML5引入的一个非常实用的功能,它允许用户直接在页面上编辑内容。这个属性可以被赋予任何一个HTML元素,使其变成可编辑状态。通过这种方式,可以创建类似于文本编辑器的富文本...

    《HTML5从入门到精通》中文学习教程.zip

    7. **表单控件增强**:HTML5对表单元素进行了增强,新增了date、time、email、url、search等输入类型,以及placeholder属性、required属性和autofocus属性,提高了用户体验和数据验证功能。 8. **Geolocation定位...

    html5入门技巧

    6. **可编辑内容(contenteditable)**:HTML5引入了`contenteditable`属性,可以将任何HTML元素设置为可编辑,用户可以直接在网页上修改内容,常用于在线编辑器或富文本输入。 7. **电子邮件输入框(type="email...

    某马机构----HTML5 新增标签和属性.rar

    HTML5是现代网页开发的标准,它在HTML4的基础上引入了许多新的标签和属性,极大地提升了开发者构建网页的效率和用户体验。这个名为"某马机构----HTML5 新增标签和属性.rar"的压缩包文件,显然是为那些希望自学前端...

    web Html5 template

    5. 表单控件增强:HTML5对表单元素进行了改进,增加了新的输入类型(如email、date、tel),验证属性(required、pattern)以及placeholder属性等,提高了用户体验和数据输入的准确性。 6. JavaScript API:HTML5...

    第3章 HTML5页面元素和属性-HTML5+CSS3 Web前端开发与实例教程(微课视频版)配套PPT

    ### 第3章 HTML5页面元素和属性 #### 一、文档结构标签 在HTML5之前,页面的不同结构(如头部、主体内容、侧边栏和页脚等)都是使用`&lt;div&gt;`标签来划分的。然而,`&lt;div&gt;`标签本身并没有特定的语义含义,这使得搜索...

    关于HTML5的22个初级技巧(图文教程)

    6. **使网页内容可编辑**:通过使用`contenteditable`属性,可以将任何HTML元素变为可编辑区域,允许用户直接在页面上进行编辑。 7. **电子邮件输入框**:HTML5新增了`type="email"`属性,用于创建电子邮件输入框,...

    ACCP 6.0 HTML所有属性总结。

    1. `contenteditable`: 使元素可编辑,用户可以直接在页面上修改内容。 2. `data-*`: 自定义数据属性,存储与元素相关的任意数据。 3. `lang`: 设定元素内容的语言代码,如`lang="en"`表示英文。 以上只是HTML众多...

Global site tag (gtag.js) - Google Analytics