<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. python 元类与定制元类

    1:元类 元类:类的创建与管理者 所有类的元类是type class a: pass print(type(a)) 结果:<class 'type'> 2:定制元类 类的实例化过程:(可看 ...

  2. C#字节byte类型读取与写入

    //创建文件 //File.Create(@"D:\a.txt"); //Console.WriteLine("创建成功"); ////删除文件 //File. ...

  3. php 之 数据访问 查询关键字 (0506)

    根据数据库中的car表做一个汽车查询页面:  一.一个关键字查询: 主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  4. php 中PHP_EOL使用

    一个小小的换行,其实在不同的平台有着不同的实现,为什么要这样,可以是世界是多样的.本来在unix世界换行就用/n来代替,但是windows为了体现他的不同,就用/r/n,更有意思的是在mac中用/r. ...

  5. select count(1) from table where ..这句sql语句的作用

    作用是计算一共有多少符合条件的行.1并不是表示第一个字段,而是表示一个固定值,count(1)和count(2)效果是一样的 count(*),执行时会把星号翻译成字段的具体名字,效果也是一样的,不过 ...

  6. ARM 之FIQ(快速中断) IRQ(中断)

    IRQ,FIQ定义:  这就是个普通中断,当我们程序定义了该中断,并且在程序运行的时候产生了IRQ中断,则此时的芯片是这样运行的------中断处理器吧利用IRQ请求线来高速ARM,ARM就知道有个I ...

  7. dll signing issue

    1. Verify if a dll has been signed sn.exe -v module.dll Scenario: sometimes for security reasons, a ...

  8. 使用Azure云存储构建高速 Docker registry

    使用Azure云存储构建高速 Docker registry 使用Docker来构建应用程序最常见的操作就是 docker run 或者 docker pull了,但是由于众所周知的原因,在国内想要高 ...

  9. 在类库中使用log4net

    最近在做一个类库,用的C#写的,为了DEBUG方便需要日志输出,于是找了log4net这个工具进行日志输出; 因为调用这个类库的是C++,而且本人对C++不是很熟悉,于是无法在app.config或者 ...

  10. Feedly订阅Blog部落格RSS网摘 - Blog透视镜

    网络信息爆炸的时代,如何更有效率地阅读文章,订阅RSS网摘,可以快速地浏览文章标题,当对某些文章有兴趣时,才点下连结连到原网站,阅读更详细的文章,Feedly Reader阅读器除了提供在线版订阅RS ...