javascript 模仿 html5 placeholder
2016-02-20 14:36
525 查看
<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="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 Function类型
- js中split函数的使用方法说明
- DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为(转)
- window.onload用法详解
- 为什么 jsp页面string cannot be resolved to a type错误
- javascript undefined=null
- document.all用法
- el、jstl快速入门
- window.external 的用法(收藏夹功能)
- javascript null
- javascript typeof返回的数据类型
- 同 一个页面,不同请求路径,如何根据实际场景写JS
- JavaScript之引用类型
- 一段javascript设计模式应用场景
- js代码程序优化
- ListView展示Json数据小案例(堆糖)
- MAC上安装并破解最新SublimeText3103版本,安装PrettyJSON离线格式化json字符串
- JavaScript日期对象使用总结
- javascript中对变量类型的推断
- javascript入门实例五