<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. centos上如何安装git

    安装依赖包 1.yum -y install zlib-devel openssl-devel perl cpio expat-devel gettext-devel 2.yum install au ...

  2. TCP/IP 要点备忘

    1. 3次握手/4次挥手过程,以及状态变化: 2. RTT,TTL,TOS(8位服务类型,最小延时.最大吞吐.最高可用.最小费用). 3. TimeWait(2msl)状态,防止最后一个ack丢失 4 ...

  3. MongoDB在win7下安装配置

    1.在MongoDB官网下载最新版本,并且安装 2.解压后在MongoDB文件目录下创建data文件夹和log文件夹,并且在log文件夹中新建mongodb.log文件 3.新建一个配置文件mongo ...

  4. java学习笔记 (5) —— Struts2 监听器配置

    1.创建MyListener.java 实现 PreResultLisener 接口 import com.opensymphony.xwork2.ActionInvocation; import c ...

  5. 3月25日html(六) Javascrip

                             第1部分 JavaScript简介 1.JavaScript它是个什么东西? 它是个脚本语言,需要有宿主文件,他的宿主文件是html文件. 2.它与J ...

  6. php 中_set()_get()实例解析

    <?php class Person { // 下面是人的成员属性, 都是封装的私有成员 private $name; // 人的名子 private $sex; // 人的性别 private ...

  7. linux 下 重启apache

    重启 apache #service httpd restart

  8. DOMElement之Offset

    有明确目的的学习比较有效,我学习HTML offset相关概念是出自一个需求,那就是计算一个绝对定位的HTML元素相对于当前窗口的偏移距离,主要是Y方向的偏移,X方向同理. 要实现这个目的,首先要弄清 ...

  9. JavaWeb学习笔记--4.EL表达式

    四. 表达式语言(相当于对JSP中对象输出的简化,功能实质上类似) 转自ZHSJUN的博客 http://blog.csdn.net/zhsjun/article/details/2254546 表达 ...

  10. z-index 所遇问题

    document.getElementById('wx_share_img').style.cssText = "width:100%;height:100%;position:fixed; ...