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

      

  • 相关阅读:
    [转载]网络流ISAP算法的简单介绍
    [漫画]120430 混血男孩
    [代码]SGU 270 Thimbles
    [代码]UVALive 5882 Racing Car Trail
    [代码]SGU 298 King Berl VI
    [解题报告]Codeforces 105D Entertaining Geodetics
    07年的第一个小时
    简单工厂模式
    讨厌什么
    休息像神的味道
  • 原文地址:https://www.cnblogs.com/bestsamcn/p/5203250.html
Copyright © 2011-2022 走看看