经验分享程序开发文档资料数据资源其它资源

jquery文本框显示描述文字js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery文本框显示描述文字js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery文本框显示描述文字js代码

HTML代码(index.html):

<!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=gb2312" />
<title>jquery文本框显示描述文字</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery.min.js" type="text/javascript"></script> 
<script src="js/jquery.placeholder.js"></script>
</head>
<body >
<div id="apply">
<form class="login" id="regist">
  <div>
    <label class="aria" for="email">邮箱帐号</label>
    <input class="text" id="email" name="email" placeholder="邮箱帐号" spellcheck="false" tabindex="1" type="email" value="">
  </div>
  <div>
    <label class="aria" for="fullname">真实姓名</label>
    <input class="text" id="fullname" name="fullname" placeholder="真实姓名" type="text" value="">
  </div>
  <div>
    <label class="aria" for="headline">自我介绍</label>
    <textarea class="text" id="headline" name="headline" placeholder="个人介绍（职业背景、专业技能，不少于 4 字）"></textarea>
  </div>

</form>
</div>
<script>
$(function() {
	var $form = $('#regist');
	var support = (function(input) {
		return function(attr) { 
			return attr in input 
		}
	})(document.createElement('input'));	
	$('.text', $form).placeholder({ hideOnFocus: false })
	var hasFailureMsg = !!$('#summary li').length;
	if (!hasFailureMsg) {
		$('#email').focus()
	}
})
</script>
<br>
</body>
</html>

JS代码(jquery.placeholder.js):

/** @author ambar* html5 placeholder pollfill* - 浣跨敤缁濆瀹氫綅鍐呭祵灞?* - 涔熼€傜敤浜庡瘑鐮佸煙* 鐩爣娴忚鍣? IE 6~9,FF 3.5```// 榛樿$('input[placeholder]').placeholder()// autofocus 涓?placeholder 鎼厤鏃讹紝濡傝闃叉娓呯┖浜嗘彁绀烘枃鏈?safari 6 & ff 16 宸蹭笉瀛樺湪姝ら棶棰?锛屾帹鑽?$('input[placeholder]').placeholder({
	// focus 鏃朵笉娓呴櫎鎻愮ず鏂囨湰锛?keypress 鏈夋晥瀛楃鏃舵墠娓呯┖ hideOnFocus:false}
)```*/
(function ($){
	var attr = 'placeholder',nativeSupported = attr in document.createElement('input') $.fn.placeholder = function (options){
	return this.each(function (){
	var $input = $(this) if ( typeof options === 'string' ){
	options ={
	text:options}
}
var opt = $.extend({
	text:'',style:{
}
,namespace:'placeholder',hideOnFocus:true}
,options ||{
}
) if ( !opt.text ){
	opt.text = $input.attr(attr)}
if ( nativeSupported ){
	// 浠呮敼鍙樻枃鏈? $input.attr(attr,opt.text) return}
var width = $input.width(),height = $input.height() var box_style = ['marginTop','marginLeft','paddingTop','paddingLeft','paddingRight'] var show = function (){
	$layer.show()}
var hide = function (){
	$layer.hide()}
var is_empty = function (){
	return !$input.val()}
var check = function (){
	is_empty() ? show():hide()}
var position = function (){
	var pos = $input.position() if (!opt.hideOnFocus){
	// 鎸夐嵉闅辫棌鐨勬儏鍐碉紝闇€瑕佺Щ鍕曞厜妯欎袱鍍忕礌 pos.left += 2}
$layer.css(pos) $.each(box_style,function (i,name){
	$layer.css(name,$input.css(name))}
)}
var layer_style ={
	color:'gray',cursor:'text',textAlign:'left',position:'absolute',textShadow:'none',fontSize:$input.css('fontSize'),fontFamily:$input.css('fontFamily'),display:is_empty() ? 'block':'none'}
// create var layer_props ={
	text:opt.text,width:width,height:'auto'}
// 纭繚鍙粦瀹氫竴娆? var ns = '.' + opt.namespace,$layer = $input.data('layer' + ns) if (!$layer){
	$layer = $('<label>',layer_props) .attr('for',$input.attr('id')) .appendTo($input.offsetParent()) $input.data('layer' + ns,$layer)}
// activate $layer .css($.extend(layer_style,opt.style)) .unbind('click' + ns) .bind('click' + ns,function (){
	opt.hideOnFocus && hide() $input.focus()}
) $input .unbind(ns) .bind('blur' + ns,check) if (opt.hideOnFocus){
	$input.bind('focus' + ns,hide)}
else{
	$input.bind('keypress keydown' + ns,function(e){
	var key = e.keyCode if (e.charCode || (key >= 65 && key <=90)){
	hide()}
}
) .bind('keyup' + ns,check)}
// 鐢变簬 ie 璁颁綇瀵嗙爜鐨勭壒鎬э紝闇€瑕佺洃鍚€兼敼鍙? // ie9 涓嶆敮鎸?jq bind 姝や簨浠? $input.get(0).onpropertychange = check position() check()}
)}
}
)(jQuery)

CSS代码(style.css):

*{BORDER-BOTTOM:0px;BORDER-LEFT:0px;PADDING-BOTTOM:0px;LIST-STYLE-TYPE:none;MARGIN:0px;OUTLINE-STYLE:none;OUTLINE-COLOR:invert;PADDING-LEFT:0px;OUTLINE-WIDTH:0px;PADDING-RIGHT:0px;FONT-SIZE:1em;BORDER-TOP:0px;FONT-WEIGHT:normal;LIST-STYLE-IMAGE:none;BORDER-RIGHT:0px;TEXT-DECORATION:none;PADDING-TOP:0px}
.clearfix:before{DISPLAY:table;CONTENT:""}
.clearfix:after{DISPLAY:table;CONTENT:""}
.clearfix:after{CLEAR:both}
.clearfix{ZOOM:1}
HTML{BACKGROUND:#0d7bd5;HEIGHT:100%;_background:#0d7bd5}
BODY{POSITION:relative;TEXT-ALIGN:center;FONT:13px/22px "Helvetica Neue",Arial,"Liberation Sans",FreeSans,"Hiragino Sans GB",sans-serif;HEIGHT:100%;COLOR:#b7d4ec;text-shadow:0 1px 0 rgba(0,0,0,.3)}
BODY{FONT-FAMILY:"Helvetica Neue",Arial,"Liberation Sans",FreeSans,"Hiragino Sans GB",sans-serif}
LABEL{FONT-FAMILY:"Helvetica Neue",Arial,"Liberation Sans",FreeSans,"Hiragino Sans GB",sans-serif}
INPUT{FONT-FAMILY:"Helvetica Neue",Arial,"Liberation Sans",FreeSans,"Hiragino Sans GB",sans-serif}
TEXTAREA{FONT-FAMILY:"Helvetica Neue",Arial,"Liberation Sans",FreeSans,"Hiragino Sans GB",sans-serif}
SELECT{FONT-FAMILY:"Helvetica Neue",Arial,"Liberation Sans",FreeSans,"Hiragino Sans GB",sans-serif}
BUTTON{FONT-FAMILY:"Helvetica Neue",Arial,"Liberation Sans",FreeSans,"Hiragino Sans GB",sans-serif}
A{COLOR:#b7d4ec;-webkit-transition:color .1s ease,background-color .1s ease}
#login{POSITION:absolute;MARGIN:-195px 0px 0px -240px;WIDTH:480px;HEIGHT:390px;TOP:50%;LEFT:50%}
#apply{POSITION:absolute;MARGIN:-195px 0px 0px -240px;WIDTH:480px;HEIGHT:390px;TOP:50%;LEFT:50%}
.used{POSITION:relative;FLOAT:right}
.success{POSITION:relative;FLOAT:right}
.failure{POSITION:relative;FLOAT:right}
#apply FORM{POSITION:relative;FLOAT:right}
#login FORM{POSITION:relative;FLOAT:right}
#login FORM{}
.js LABEL.aria{POSITION:absolute;LEFT:-999em}
.js #login LABEL.remember_me{DISPLAY:inline}
#login .captcha{TEXT-ALIGN:left;MARGIN-BOTTOM:18px}
#login .captcha IMG{VERTICAL-ALIGN:middle;MARGIN-RIGHT:10px}
.text{BORDER-BOTTOM:#0d7bd5 1px solid;BORDER-LEFT:#0d7bd5 1px solid;PADDING-BOTTOM:10px;LINE-HEIGHT:18px;MARGIN:0px 0px 18px;PADDING-LEFT:10px;WIDTH:248px;PADDING-RIGHT:10px;DISPLAY:inline-block;BACKGROUND:#e8f4fc;COLOR:#888;FONT-SIZE:14px;BORDER-TOP:#0d7bd5 1px solid;CURSOR:text;BORDER-RIGHT:#0d7bd5 1px solid;PADDING-TOP:10px;box-shadow:0 1px 0 rgba(255,255,255,.3),0 1px 3px rgba(0,0,0,.3) inset;background-clip:padding-box;border-radius:5px}
INPUT[type=email]{IME-MODE:disabled}
INPUT[type=password]{IME-MODE:disabled}
.text:focus{BACKGROUND:#fff}
.button{BORDER-BOTTOM:#147dcd 1px solid;TEXT-ALIGN:center;BORDER-LEFT:#147dcd 1px solid;PADDING-BOTTOM:6px;LINE-HEIGHT:18px;PADDING-LEFT:15px;PADDING-RIGHT:15px;DISPLAY:inline-block;BACKGROUND:#1e95e5;FLOAT:left;COLOR:#b7d4ec;FONT-SIZE:14px;VERTICAL-ALIGN:middle;BORDER-TOP:#147dcd 1px solid;CURSOR:pointer;BORDER-RIGHT:#147dcd 1px solid;PADDING-TOP:6px;text-shadow:0 1px 0 rgba(0,0,0,.2);box-shadow:0 1px 0 rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.15) inset;border-radius:5px;-webkit-appearance:none}
.button:active{BACKGROUND:#1d8fdb;box-shadow:0 1px 0 rgba(255,255,255,.15)}
.button:focus{box-shadow:0 0 10px rgba(255,255,255,.5),0 1px 0 rgba(255,255,255,.15) inset}
.actions{MARGIN:6px 0px 0px;DISPLAY:block;FLOAT:right}
.middot{PADDING-BOTTOM:0px;PADDING-LEFT:5px;PADDING-RIGHT:5px;PADDING-TOP:0px}
.reset{COLOR:#b7d4ec}
.remember_me{COLOR:#b7d4ec}
.reg{POSITION:absolute;TOP:30px;RIGHT:40px}
.register{PADDING-BOTTOM:3px;PADDING-LEFT:15px;PADDING-RIGHT:15px;DISPLAY:inline-block;MARGIN-BOTTOM:5px;COLOR:#b7d4ec;FONT-SIZE:14px;PADDING-TOP:3px;box-shadow:0 1px 0 rgba(255,255,255,.15),0px 1px 3px rgba(0,0,0,.2) inset;border-radius:50px}
.register:hover{}
TEXTAREA.text{HEIGHT:80px}
.failure{TEXT-ALIGN:left;PADDING-BOTTOM:10px;MARGIN:0px 0px 20px;PADDING-LEFT:10px;WIDTH:252px;PADDING-RIGHT:10px;BACKGROUND:#0c6ebf;COLOR:#b7d4ec;PADDING-TOP:10px;box-shadow:0 1px 0 rgba(255,255,255,.15),0px 1px 3px rgba(0,0,0,.2) inset;border-radius:4px}
.failure LI{LINE-HEIGHT:1em}
.failure LI + LI{MARGIN-TOP:10px}
.failure LI I{WIDTH:16px;DISPLAY:inline-block;HEIGHT:16px;VERTICAL-ALIGN:middle;MARGIN-RIGHT:5px}
.failure LI SPAN{VERTICAL-ALIGN:middle}
.failure LI A{COLOR:#9ed8ff;TEXT-DECORATION:underline}
.failure LI A:hover{COLOR:white}
#apply .iphone-app-landing{DISPLAY:none}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
35.76 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
35.76 KB
立即下载
傅梦萍冰
了解
打赏作者 鼓励作者
Html 表单代码1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章