<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. Linux 数据 CD 刻录

    http://www.cyberciti.biz/tips/linux-burning-multi-session-cds-on-linux.html #mkisofs -dvd-video -inp ...

  2. 关于html控件和服务器控件摁回车后提交按钮的问题

    今天做项目用到,项目是一个洗车系统,刷卡后在焦点出自动触发回车键事件,如,一个文本框,把焦点放入,刷一下卡,文本框自动获取卡号,同时触发回车事件,(就像银行办卡一样),发现刷卡后页面刷新后并没有执行按 ...

  3. 2015版Force Touch Mac Book激活三个手指拖动窗口

    新买的2015版的Mac Book Pro,一切都好,就是原来一直很的很习惯的三个手指拖动窗口的手势,突然找不到地方设置了,很是让我失望了一把,在想苹果怎么会把这么有用的手势去掉了呢.还好有万能的Go ...

  4. eclipse python开发环境搭建

    eclipse python开发环境搭建[非原创] 1.在www.eclipse.org官网下载Eclipse Classic 4.2.2,Win7 64位下载eclipse-SDK-4.2.2-wi ...

  5. net.sf.json.JSONException: There is a cycle in the hierarchy!

    因为项目中使用了AJAX技术,jar包为:json-lib.jar,在开发过程中遇到了一个JSON-LIB和Hibernate有关的问题: 如hibernate延迟加载错误,这都是些老问题了,一看就知 ...

  6. php生成批次唯一code(转)

    /** * @param int $no_of_codes//定义一个int类型的参数 用来确定生成多少个优惠码 * @param array $exclude_codes_array//定义一个ex ...

  7. (翻译玩)在使用flask-script的应用上使用gunicorn

    在使用flask-script的应用上使用gunicorn 两周前,我强烈的想要学习一点新知识,像新的语言,新的框架之类的!好让我的大脑忙碌起来,寻找了一些日子后,我决定学习现在越来越流行的云应用平台 ...

  8. C语言初学 if-else语句判别在ASCII值中小于32的可控制符的类型

    #include<stdio.h> main() { char c; printf("输入一个符号\n"); c=getchar(); if(c<32) prin ...

  9. 开源 一行代码实现多形式多动画的推送小红点WZLBadge(iOS)-备用

    更新日志 V1.2 2015.09.25 1.UITabBarItem badge is supproted; 2.Enable change badge properties when badge ...

  10. ThrottleStop

    ThrottleStop 我的要开这个软件,睿频才能开.不然一直工作在1.8Ghz下默认频率太低了开了这个速度才有提升