- 浏览: 155946 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (137)
- JavaScript (23)
- get post (0)
- SSH (4)
- Hibernate (1)
- cmd (2)
- 火狐 IE (1)
- 中英文环境模板下载 (1)
- 日期 (0)
- 其他总结 (5)
- 正则校验 (3)
- Sql Server (0)
- FreeMarker (1)
- 继承 (1)
- SQL (2)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (1)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (0)
- 解决int和Integer不能互转 (0)
- 原子类 (1)
- Final,finally,finalize的区别 (1)
- Web前端 (12)
- Reader InputStream (1)
- 线程 (1)
- JDBC (1)
- AJAX (3)
- Linux (2)
- 素数 (1)
- 接口-----继承 (1)
- 数据库查询性能优化 (1)
- Spring MVC3 深入了解 (1)
- JS (18)
- log4j简介 (1)
- Java序列化的机制和原理 (0)
- allowTransparency属性 (1)
- 测试类 (1)
- CSS (14)
- JQuery (10)
- 多线程 (1)
- 数据库 (2)
- Spring 注解 (1)
- JSTL标签库 (1)
- HTML (8)
- 界面设计 (4)
- 测试 (4)
- 职业生涯 (1)
- 数据可视化 (1)
- UI设计 (3)
- eclipse怎样生成javadoc (2)
- redis memcache 比较 (1)
- Windows 8系统IE10无法安装Flash Player插件的解决办法 (1)
- IE7 问题 (1)
- 常用JS验证 (1)
- Hadoop,MapReduce学习步骤 (1)
- 开始-运行-命令大全 (1)
- jQuery与ExtJS优缺点比较 (1)
- Oracle (1)
- 文档转换 (1)
- Maven与Ant比较 (1)
最新评论
-
谁说我不是会员:
很给力的文章,通俗易懂
Get请求和Post请求的区别 -
Spirit_eye:
请问一个图片按钮怎么置灰
按钮置灰跟按钮不显示
HTML5 的 PLACEHOLDER 属性\
HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现:
默认提示文字是灰色的,可以通过CSS来改变文字样式:
兼容其他不支持placeholder的浏览器:
设计师应该拥有的 50 个很有用的 CSS 代码
http://www.oschina.net/question/5189_112117
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
发表评论
-
jQuery与ExtJS优缺点比较
2014-03-18 11:36 2040jQuery与ExtJS优缺点比较 jQuery 主页:h ... -
html5 在IE6/IE7/IE8中使用html5标签
2014-01-13 11:26 5039html5 在IE6/IE7/IE8中使用html5标签 h ... -
让IE浏览器支持HTML5标准的方法
2014-01-10 15:24 554让IE浏览器支持HTML5标准 ... -
jquery设置元素的readonly和disabled
2013-12-25 10:29 498jquery设置元素的readonly和disabled ... -
JS数据类型转换
2013-12-06 09:55 709JS数据类型转换 JS数据类型转换方法主要有三种:转换函数、 ... -
window.onload
2013-11-27 16:50 600window.onload 简单地讲 ... -
JS:window.onload的使用
2013-11-27 16:30 616JS:window.onload的使用 1、最简单的调用 ... -
$(document).ready() 与 JavaScript中的window.onload
2013-11-27 15:07 595Jquery中$(document).ready()的 ... -
JSON 数据格式
2013-11-14 10:37 432JSON 数据格式 JSON(JavaScript Obje ... -
js 中 map 转换 json 格式
2013-11-01 14:13 19895js 中 map 转换 json 格式 function ... -
JS获取当前页面的URL信息
2013-10-31 17:30 580JS获取当前页面的URL信 ... -
input失去焦点和获得焦点jquery焦点事件
2013-01-09 16:12 4566<html xmlns="http://www ... -
input失去焦点和获得焦点jquery焦点事件
2013-01-09 16:12 1359<html xmlns="http://www ... -
style中position的属性值详解
2013-01-09 15:31 679style中position的属性值详 ... -
HTML 事件属性
2012-12-07 17:52 704HTML 4 的新特性之一是可以使 HTML 事件触发浏览 ... -
HTML <a> 标签的 target 属性
2012-12-07 17:43 1593<h3>Table of Contents< ... -
jsp页面Table自动换行
2012-12-05 10:29 2069自动换行:word-wrap:break-word;table ...
相关推荐
TinyMCE 的占位符文本插件 这个插件为 TinyMCE 编辑器带来了 HTML5 占位符属性功能。 用法 将插件脚本添加到页面 将“占位符”添加到 tinymce 配置插件数组。 像往常一样向 textarea 添加占位符属性。 享受!
* 表单属性:HTML5的表单元素具有多种属性,例如placeholder、required等。 * 表单应用场景:HTML5的表单元素广泛应用于用户信息收集、表单验证等领域。 八、HTML5表单属性 * 表单属性:HTML5提供了多种表单属性,...
以上只是HTML5特殊属性的一小部分,它们极大地增强了HTML的表达能力和功能性。通过这些属性,开发者可以创建更加动态、适应性强且用户友好的网页。在实际开发中,结合CSS和JavaScript,HTML5能够实现更丰富的交互和...
4. **placeholder属性**:`placeholder`属性为输入字段提供了预期值的提示文本,通常显示在输入框内,直到用户开始输入时消失。它适用于`text`、`search`、`url`、`tel`、`email`和`password`类型的`<input>`元素,...
这段代码会在页面加载完成后,找到所有具有`placeholder`属性的输入元素,并应用foxholder.js插件,展示动画占位符效果。 此外,foxholder.js还具有良好的浏览器兼容性,它支持现代浏览器,同时也考虑到了对老版本...
HTML5中的`<textarea>`元素用于创建多行文本输入,通过`rows`和`cols`属性定义其大小,而`placeholder`属性则可以设置提示文字。 2. **图片上传预览**:HTML5引入了`<input type="file">`元素的`accept`属性,允许...
HTML5是现代网页开发的核心标准,它引入了许多新特性、元素和属性,极大地提升了Web开发的效率和用户体验。其中,HTML5的全局属性是一组通用的属性,可以在任何HTML元素上使用,为开发者提供了更大的灵活性和控制力...
### HTML 5 标签、属性、事件及兼容性速查表 #### 概述 HTML 5(HyperText Markup Language 第五版)是万维网的核心语言之一,它不仅继承了HTML 4的优点,还增加了许多新特性,旨在使Web更加丰富、互动和多媒体化...
HTML5也支持在和元素中使用placeholder属性来设定占位符文本。当输入字段为空时,这个属性指定的值会显示在输入框内,起到提示作用,一旦用户开始输入,占位符文本就会消失。这对于提升用户交互体验非常有帮助。 ...
HTML5引入了许多新的属性,增强了网页的功能性和可用性: 1. `placeholder`:输入元素的提示文本。 2. `autofocus`:元素加载时自动获取焦点,如。 3. `autocomplete`:控制输入字段的自动完成功能。 4. `datetime`...
在这个教程中,我们将深入探讨如何使用HTML5来编辑网站代码。 首先,了解HTML5的基本结构至关重要。一个基本的HTML5文档通常由`<!DOCTYPE html>`声明开始,接着是`<html>`元素,这是整个文档的根元素。在`<html>`...
此外,HTML5还提供了`placeholder`属性,可以在输入框内设置提示文本,帮助用户了解应填写的信息。比如: ```html <input type="text" placeholder="请输入您的邮箱地址"> ``` 接着,我们用CSS3来实现动态高亮效果...
在Web开发中,contenteditable属性是HTML5引入的一个非常实用的功能,它允许用户直接在页面上编辑内容。这个属性可以被赋予任何一个HTML元素,使其变成可编辑状态。通过这种方式,可以创建类似于文本编辑器的富文本...
7. **表单控件增强**:HTML5对表单元素进行了增强,新增了date、time、email、url、search等输入类型,以及placeholder属性、required属性和autofocus属性,提高了用户体验和数据验证功能。 8. **Geolocation定位...
6. **可编辑内容(contenteditable)**:HTML5引入了`contenteditable`属性,可以将任何HTML元素设置为可编辑,用户可以直接在网页上修改内容,常用于在线编辑器或富文本输入。 7. **电子邮件输入框(type="email...
HTML5是现代网页开发的标准,它在HTML4的基础上引入了许多新的标签和属性,极大地提升了开发者构建网页的效率和用户体验。这个名为"某马机构----HTML5 新增标签和属性.rar"的压缩包文件,显然是为那些希望自学前端...
5. 表单控件增强:HTML5对表单元素进行了改进,增加了新的输入类型(如email、date、tel),验证属性(required、pattern)以及placeholder属性等,提高了用户体验和数据输入的准确性。 6. JavaScript API:HTML5...
### 第3章 HTML5页面元素和属性 #### 一、文档结构标签 在HTML5之前,页面的不同结构(如头部、主体内容、侧边栏和页脚等)都是使用`<div>`标签来划分的。然而,`<div>`标签本身并没有特定的语义含义,这使得搜索...
6. **使网页内容可编辑**:通过使用`contenteditable`属性,可以将任何HTML元素变为可编辑区域,允许用户直接在页面上进行编辑。 7. **电子邮件输入框**:HTML5新增了`type="email"`属性,用于创建电子邮件输入框,...
1. `contenteditable`: 使元素可编辑,用户可以直接在页面上修改内容。 2. `data-*`: 自定义数据属性,存储与元素相关的任意数据。 3. `lang`: 设定元素内容的语言代码,如`lang="en"`表示英文。 以上只是HTML众多...