<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. [c#]asp.net开发微信公众平台(4)关注事件、用户记录、回复文本消息

    上一篇已经把所有消息封装且都各自有方法处理了,这篇从使用第一步——关注开始,  关注之后进行消息记录,同时回复文本消息给用户,关注方法:DoSub,另外新用户扫描带参数的二维码关注方法:DoCodeN ...

  2. 华为oj 统计字符串不同字符

    #include <stdio.h> #include <string.h> int firstSingle(char *str) { int hash[128]={0}; f ...

  3. 最近公共祖先:LCA及其用倍增实现 +POJ1986

    Q:为什么我在有些地方看到的是最小公共祖先? A:最小公共祖先是LCA(Least Common Ancestor)的英文直译,最小公共祖先与最近公共祖先只是叫法不同. Q:什么是最近公共祖先(LCA ...

  4. lib,dll区别 及 VS中如何添加lib,dll

    1.加载lib/头文件 分两种方法: (1)适用于当前项目 第一步:项目->属性->C/C++->常规->附加包含目录(浏览.h文件的路径) 添加包含文件 第二步:项目-> ...

  5. copy-on-write(写时拷贝技术)

    今天看<Unix环境高级编程>的fork函数与vfork函数时,看见一个copy-on-write的名词,貌似以前也经常听见别人说过这个,但也一直不明白这究竟是什么东西.所以就好好在网上了 ...

  6. Magento资源问题上CDN方案研究

    通过对Magento的了解,发现Magento的资源文件主要分布在media.js.skin三个文件夹里,media文件夹主要包括了系统自带编辑器WYSIWYG Editor 所有编辑器涉及到的资源( ...

  7. Jetty9开发(1)

    Version: 9.2.14.v20151106  Jetty : 开发文档 jetty的官网:http://www.eclipse.org/jetty/ Jetty : 开发文档 目录 I. je ...

  8. 『信息收集』GoogleHacking快速定位目标网站

    第一次接触到“GoogleHacking”是在学校初次Geek大赛上. 很有意思的一道题目,网页中原题大致是这样的: 下面是数学之美(吴军著)的封面,请找出这本书的ISBN码(这一关的Key值) 很不 ...

  9. Dr.Watson使用技巧摘要

    Dr.Watson使用技巧摘要 For Win98/WinME the executable is DRWATSON.EXEFor WinNT/Win2000/WinXP the executable ...

  10. 安装Visual Studio 2010之后怎样安装MSDN Library

    这篇博客参考自:http://justargon.blog.163.com/blog/static/21394413020134100737688/ MSDN2010安装及使用(MSDN Librar ...