zoukankan      html  css  js  c++  java
  • javascript 模仿 html5 placeholder

     <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位验证码');
    

      

  • 相关阅读:
    IOS-多线程技术
    设计模式-抽象工厂设计模式
    IOS-内存管理
    IOS-MVC的使用
    POJ2411 Mondriaan's Dream (广场铺砖问题 状压dp)
    NOIp2006T2 金明的预算方案
    POJ1179 Polygon(区间DP)
    NOIp2006T1能量项链
    美梦1(JSOI2014SC)
    TJOI2013(BZOJ3173)最长上升子序列
  • 原文地址:https://www.cnblogs.com/bestsamcn/p/5203250.html
Copyright © 2011-2022 走看看