HTML5学习笔记——placeholder属性

来源：互联网发布：java程序输出杨辉三角编辑：程序博客网时间：2024/05/17 03:27

参考资料：1、http://levi.cg.am/?p=2741

2、http://zkeyword.com/post/jquery_placeholder_2/

在HTML5中，存在placeholder属性，此属性的作用在<input>中输入提示信息，当<input>获得焦点或输入内容时，提示信息会自动消失,失去焦点或者清空输入的内容时，提示信息会自动出现.

代码如下:

<div><label for="text">placeholder</lable><input type="text" placeholder="请输入信息" id="searchText"/></div>

placeholder 是HTML5提供的的新特性，目前只支持少量浏览器

现在只支持这些浏览器：Firefox4.0+、Chrome4.0+、Safari4.0+，Opera 11、IE9 RC2尚不支持。

使用jquery 解决跨浏览器支持方法：

<script type="text/javascript">(function(){var $searchText = $('#searchText');var searchValue = $searchText.attr('placeholder');if ( !( 'placeholder' in document.createElement('input') ) ){$searchText.removeAttr('placeholder').val(searchValue).bind('focus',function(){if ( this.value==searchValue) {this.value=''; };}).bind('blur',function(){if ( this.value=='' ){ this.value=searchValue; };});}else{$searchText.bind('focus',function(){if ( jQuery(this).attr('placeholder') == searchValue ){ jQuery(this).attr('placeholder','') };}).bind('blur',function(){if ( jQuery(this).attr('placeholder','') ){ jQuery(this).attr('placeholder',searchValue) };});}})();</script>

使用以上的jquery 代码就可以实现支持placeholder属性。

使用jquery mobile和HTML5 placeholder新特性制作的登陆页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录</title><link rel='stylesheet' href='jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css'/><script type='text/javascript' src='js/jquery-1.7.min.js'></script><script type='text/javascript' src='jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js'></script></head><body><!-- begin first page --><section id="page1" data-role="page" class="home">  <div data-role="header" style="background-color:#4EB100;color:#fff;">  <a href="index.jsp"  data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true" data-transition="flow">首页</a>  <h1>广电医疗平台</h1>  <div class="ui-btn-right"><a href="modifyPassWord.jsp" data-role="button" data-transition="flow" data-icon="info" data-mini="true">找回密码</a></div>  </div>  <div data-role="content" class="content">    <p style="backg">    <font color="#2EB1E8" ><center><img src="img/loginlogo.jpg"/></center></font>    </p>            <form method="post" id="loginform" action="">            <input type="text" name="SFZH" id="SFZH" placeholder="身份证号/手机"/><br>            <input type="password" name="PASSWORD" id="PASSWORD"  placeholder="密码"/>            <input type="hidden" name="requestUrl"/>  <div class="ui-grid-a" style="margin-top:30px;"><div class="ui-block-a"><a href="regist.jsp" data-role="button" id="toregist"  data-icon="plus" data-transition="flow">注册</a></div><div class="ui-block-b"><a data-role="button" id="submit" data-theme="a" data-icon="check" style="background-color:#4EB100;color:#fff;" data-transition="flow">登录</a></div></div>        </form>          </div>  <footer data-role="footer" data-position="fixed"><h1>&copy 2014 预约服务</h1></footer>    <style type="text/css">p {font-size: 1.5em;font-weight: bold;}.home{/*background-image:url(img/bg.png);*/background-color:#F0F0F0;}#SFZH{background-image:url(img/us1.jpg);background-position:left; background-repeat:no-repeat;padding-left:65px;height:60px;font-size:22px;}#PASSWORD{background-image:url(img/ps1.jpg);background-position:left; background-repeat:no-repeat;padding-left:65px;height:60px;font-size:22px;}</style></section></body></html>

效果图：

0 0