标签归档：html

input高级用法

发表于 2008年03月3日 由 sprite

1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3.防止退后清空的TEXT文档(可把style内容做做为类引用) <INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput> 4.ENTER键可以让光标移到下一个输入框 <input onkeydown=”if(event.keyCode==13)event.keyCode=9″ > 5.只能为中文(有闪动) <input onkeyup=”value=value.replace(/[ -~]/g,’’)” onkeydown=”if(event.keyCode==13)event.keyCode=9″> 6.只能为数字(有闪动) <input onkeyup=”value=value.replace(/[^\d]/g,’’) “onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))”> 7.只能为数字(无闪动) <input style=”ime-mode:disabled” onkeydown=”if(event.keyCode==13)event.keyCode=9″ onKeyPress=”if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false”> 8.只能输入英文和数字(有闪动) <input onkeyup=”value=value.replace(/[\W]/g,’’)” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))”> 9.屏蔽输入法 … 继续阅读 →

发表在 Web开发 | 标签为 , | 留下评论

揭开HTML 5工作草稿的神秘面纱

发表于 2008年02月4日 由 sprite

万维网联盟(W3C)发布了HTML 5规格说明书的草稿 ,这是自HTML 4在十多年前发布以来的第一个主要的修订版.在这期间,随着开发者逐渐将自己的应用程序移植到Web之上,它已经从一个主要的静态媒体发展为互动的应用程序,具有丰富的媒体内容.HTML 5的目的就是要反映出这样的变化. 新增的特性充分地考虑了应用程序开发人员,因此,HTML 5引入了大量的新的Javascript API.可以利用这些内容与对应的HTML元素相关联,它们包括: 二维绘图API,可以用在一个新的画布(Canvas)元素上以便呈现图像、游戏图形或者其他运行中的可视图形. 一个允许web应用程序将自身注册为某个协议或MIME类型的API. 一个引入新的缓存机制以支持脱机web应用程序的API. 一个能够播放视频和音频的API,可以使用新的video和audio元素. 一个历史纪录API,它可以公开正在浏览的历史纪录,允许页面在加上它之后更好的在AJAX应用程序中实现对后退按钮的支持. 跨文档的消息传递,它提供了一种方式,使得文档可以互相通信而不用考虑它们的源域 在某种程度上,这样的设计是为了防止跨站点的脚本攻击. 一个支持拖放操作的API,用它可以与draggable特性相关联. 一个支持编辑操作的API,用它可以与一个新的全局contenteditable特性相关联. 一个新的网络API,它支持web应用程序在本地网络上互相通信,并在它们的源服务器上维持双向的通信. 使用JavaScript API的键/值对实现客户端的持久化存储,同时支持嵌入的SQL数据库. 服务器发送的事件,通过它可以与新的事件源(event-source)元素关联,新的事件源元素有利于与远程数据源的持久性连接,而且极大地消除了在Web应用程序中对轮询的需求. 同时,HTML 5还引入了许多新的表示元素以支持普通的页面组件,例如headers(页眉),footers(页脚),figures(插图),dialog(对话, 用于标记会话)以及navigation(导航).此外,还有一个新的datagrid元素支持交互式的表与树,一个为组合框提供的datalist元素,以及一个progress特性,它能够展现一个运行时间长的任务的完成情况.同时,还增加了支持RSS种子的页面标签. 针对表单,input元素的type类型包含了对日期、时间、email和URLs的全新支持,这样一来,浏览器就能够提供用户界面元素,例如一个日历的日期选择器或者与用户地址薄的集成,同时还能够将数据按照一个定义好的格式提交给服务器. HTML 5还放弃了对一些众所周知的特性的支持.其中最引人注目的就是放弃了对框架(frames)的支持,因为长期以来框架均被认为破坏了网页的可访问性与可用性.值得注意的是,即使浏览器完全支持HTML 5标准,它仍然会继续支持这些被放弃的特性,因为对HTML旧版本的支持会持续多年. HTML 5在W3C的HTML工作组的指导下进行开发,该工作组成立于2007年3月.工作组的运营是完全公开的,在近500名参与者中包括了来自Apple、 Google、IBM、Microsoft、Mozilla Foundation、Nokia与Opera的成员. “毫无疑问, HTML是一个非常重要的标准”,第一个HTML版本的作者,W3C理事Tim Berners-Lee说道.“我很高兴地看到开发者社区,包括浏览器提供商一起致力于创建Web的最佳发展轨迹.要整合这么多人的想法是一个艰巨的任务,我们面临的挑战就是要找到创新与守成、理想与务实之间的平衡.” HTML 5将逐渐替代HTML 4,但是HTML 5规格说明书的最终确定依然任重而道远.目前的计划是在2009年期间初步将其作为候选以推荐使用,然后在2010年9月作为最终的正式版本而被推行. 作者 … 继续阅读 →

发表在 Web标准, 交互设计 | 标签为 | 一条评论

IE的if条件注释Hack

发表于 2007年12月20日 由 sprite

IE的if条件注释Hack <!–[if !IE]&gt;&lt;!–> 除IE外都可识别 &lt;!– <!–[if IE]&gt; 所有的IE可识别 &lt;![endif]–> <!–[if IE 5.0]&gt; 只有IE5.0可以识别 &lt;![endif]–> <!–[if IE 5]&gt; 仅IE5.0与IE5.5可以识别 &lt;![endif]–> <!–[if gt IE 5.0]&gt; IE5.0以及IE5.0以上版本都可以识别 &lt;![endif]–> <!–[if IE 6]&gt; 仅IE6可识别 &lt;![endif]–> <!–[if lt IE 6]&gt; IE6以及IE6以下版本可识别 &lt;![endif]–> <!–[if gte IE 6]&gt; … 继续阅读 →

发表在 杂七杂八 | 标签为 , , | 一条评论

Hover Behavior

发表于 2007年12月20日 由 sprite

Hover Behavior提供了对DHTML的事件onmouseover，onmouseout，onfocus以及onblur的处理。 主要内容 1．Hover Behavior简介 2．完整示例

发表在 Web开发 | 标签为 , | 留下评论

如何用dl、dd、dt做表单

发表于 2007年10月29日 由 sprite

昨天做了个表单，依旧用table来布局，因为个人感觉table布局表单是不错的（追求div重构，不等于完全抛弃table）。 今天早上起来，想想还是换种方式来做表单的布局。于是便选种了dl、dd、dt，如下： XHTML部分： <dl>  <dt>公司名称：</dt>  <dd> <span class="red">*</span></dd>  <dt>公司工业类别：</dt>  <dd>计算机和消费电子  空气调节器 <span class="red">*</span></dd>  <dt>公司介绍：</dt>  <dd><textarea name="textarea" cols="100" rows="9">　　广州骏宝实业有限公司创始于1990年，是集科研、制造、销售、服务于一体，拥有研究开发中心、模具设计制造中心、电子和电路控制设计制造中心、注塑加工和产品整机生产基地的规模化经济实体。骏宝公司生产基地约占地 30000平方米，拥有精良的设备，强大的生产能力。公司按照现代化企业的规范组织和管理，坚持诚信、创新、勤奋、进取的企业精神，不断发展壮大。 　　骏宝公司人才荟萃，现有职工326人，拥有研发 … </textarea> <span class="red">*</span>  </dd> </dl> CSS部分： <p class="code"> dl{padding-left:14px;} dt{float:left;font-weight:bold;padding:12px 0 4px;} dd{ text-align:left;height:auto;padding:8px 0;} input,select{ vertical-align:middle;color:#333333; background: #ffffff; … 继续阅读 →

发表在 Web开发, Web标准, 网站架构 | 标签为 , , , , | 留下评论

如何使用11px及10px的清晰汉字

发表于 2007年05月11日 由 sprite

注：以下效果在WindowsXP和Photoshop CS下测试通过。 在Photoshop中要想得到清晰的汉字，就需要关闭抗锯齿功能。 但是这样当字体小于12px的时候，系统默认的宋体就变得一团糟，而黑体或者其他的外挂字体也都纷纷变得很难看 在确保系统安装有繁体中文及日文支持后，可在Photoshop中使用PMingLiU和MS UI Gothic字体。 最简单的安装方法就是用IE打开任意网站，将字符编码改为繁体中文和日文，系统就会自动安装相应的字符。 PMingLiU可支持到11px的大小，允许中文简体和繁体字符。 MS UI Gothic其实是日文字体，因此只支持日文字库中有的汉字，比如“够”就不存在日文字库中。由于日文中的汉字大部分是繁体中文，因此输入的时候要使用支持繁体字符的输入法(如微软拼音)。

发表在 交互设计 | 标签为 , | 留下评论