<form action="?action=deliver" method="post" class="deliver-form">
<div class="article-type">
<span>类型:</span>
<?php foreach (range(1,14) as $num){ ?>
<input type="radio" name="type"><img src="data:images/icon<?php echo $num ?>.gif" >
<?php } ?>
</div>
<div class="article-tit">
<input type="text" id="title" name="article-title" value="请输入标题">
</div>
<div class="article-cont">
<textarea name="article-text" id="textarea" cols="30" rows="10">请输入帖子内容</textarea>
</div>
<div class="code-sub">
<input type="text" name="code" value="请输入4位验证码" id="code-ipt"><img src="code.php" alt="验证码" id="code">
<input type="submit" value="发表" class="sub">
</div>
</form>

js

//input模仿placeholder,参数id是input的id,value为input的value
//如果为textarea的话,value则为textterea的默认内容(textarea不能在value使用默认值)
//value首先要在html中定义
//默认文字的颜色可以先在css中声明
function _placeholder(id,value){
var _text = document.getElementById(id);
_text.onblur = function(){
if(this.value == ''){
this.style.color='#666';
this.value = value;
}
}
_text.onfocus = function(){
if(this.value == value){
this.value = '';
this.style.color='#333';
}
}
}
_placeholder('title','请输入标题');
_placeholder('textarea','请输入帖子内容');
_placeholder('code-ipt','请输入4位验证码');

  

javascript 模仿 html5 placeholder的更多相关文章

  1. 玩转 HTML5 Placeholder

    Placeholder(占位符) 是 HTML5 新增的一个 HTML 属性,用来对可输入字段的期望值提供提示信息,目前已经得到主流浏览器的广泛支持,使用方式非常简单: <input id=&q ...

  2. IE8 不支持html5 placeholder的解决方案

    IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans ...

  3. Cross-Browser HTML5 Placeholder Text

    One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. ...

  4. (转)html5 Placeholder属性兼容IE6、7方法

    使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现zhihu的解决方法不错,特记录下 wind ...

  5. HTML5 placeholder(空白提示) 属性

    原文地址:HTML5′s placeholder Attribute 演示地址: placeholder演示 原文日期: 2010年08月09日 翻译日期: 2013年8月6日 浏览器引入了许多的HT ...

  6. html5 placeholder ie 不兼容问题 解决方案

    解决HTML5 placeholder的方案 来源:   时间:2013-09-05 20:06:49   阅读数:11375 分享到: 0 [导读] 使低版本浏览器支持Placeholder有很多方 ...

  7. 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)

    继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...

  8. javascript模仿php 函数 trim ltrim rtrim (原创)

    javascript模仿php 函数 trim  ltrim rtrim,去除字符串两边空格或其他符号 本文地址:js trim js php trim function trims(){ this. ...

  9. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

随机推荐

  1. IDEA - Project files cannot be watched (are they under network mount?)

    在64位Linux系统上使用IDEA时遇到如下问题,启动时警告信息External file changes sync may be slow Project files cannot be watc ...

  2. MySql事务及隔离级别

    在数据库中,所谓事务是指作为单个逻辑工作单元执行的一系列操作. 事务的操作: 先定义开始一个事务,然后对数据作修改操作, 这时如果提交(COMMIT),这些修改就永久地保存下来 如果回退(ROLLBA ...

  3. 小巧实用的数字加减插件(jquery插件)

    2015-12-04 近期项目需要,我将插件更新了,增加了两个参数,一个参数控制文本框是否支持输入,另一个参数则是新增了一个回调函数,返回文本框内的值.另外对代码局部重构了,优化了一下封装,需要的朋友 ...

  4. xml2js

    实际做项目的时候会有很多的XML配置文件,有些XML多达上千行,比如物品,武将的配置,一般的手游项目是直接解析XML文件,这就引发2个问题. 1.XML是明文,代码中解析必要要做加密. 2.有些配置过 ...

  5. 转载:spring ,struct2 在 web.xml中的配置

    转载网址:http://blog.sina.com.cn/s/blog_4c6e822d0102dv63.html <!-- Struts2 need begin-->  <filt ...

  6. C语言基础学习基本数据类型-变量的输出与输入

    变量的输出 变量如何输入输出呢?实际上,在这之前你已经使用过输出语句(printf语句)了,我们可以使用printf来执行输出. printf语句的使用方法如下: printf(格式控制字符串, 数据 ...

  7. 记录终端输出的LOG到文件

    先要说明为什么要记录终端会话,因为常会遇到这样的情况,终端是有缓存大小限制的,当在终端打印的消息超出缓存范围,它前面的打印消息就自动丢失了,这对于我们调试程序会造成障碍,所以有记录完整终端打印消息的必 ...

  8. STL string常用操作指令

    s.insert(pos,args); 在pos之前插入args指定的字符.pos可以是一个下标或一个迭代器.接受下标的版本返回一个指向s的引用;接受迭代器的版本返回指向第一个插入字符的迭代器. s. ...

  9. 【杭州图铭科技有限公司招募贴】——“JUST DO IT”

    I'm convinced that the only thing that kept me going was that I loved what I did. ——Steve Paul Jobs( ...

  10. ubuntu 12.04 下搭接Qt 嵌入式开发环境

    1.安装前的准备工作 (1)有ubuntu12.04 的系统镜像(也可以其他linux 如Fedorea9),都是安装好的 (2)虚拟机VMWare 或 VirtualBox ,两者都可以,都是安装好 ...