HTML5学习笔记——placeholder属性

最新推荐文章于 2022-09-19 07:36:59 发布

番茄很忙

最新推荐文章于 2022-09-19 07:36:59 发布

阅读量1.6k

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/FS_sky/article/details/24986349

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考资料：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>

效果图：