jQuery实现的一个自定义Placeholder属性插件,jQuer
分类:关于美高梅

$(self.input).bind( 'blur', function(e){
 if(this.value == ''){
  self.hint.style.display = 'inline';
 }
});

HTML5中文本框的新属性placeholder是个非常好用的属性,但是IE系列直至IE9都不支持这一属性,这就让大家在用这一属性的时候有些犹豫不决。自己曾经写过很多类似共的小控件,但是都不是很通用,这里分享一个渐进增强的自定义placeholder的jQuery插件。有点是使用简单,大家也可以根据自己的需要进行改进。平常写jQuery插件比较少,考虑到用jQuery的同学比较多,这里就用jQuery插件的形式编写了。

jquery怎获取,鼠标点击的标签的自定义属性,并把这个属性赋值给一个变量?

$("div [key*='']").click(function(){
var keyval=$(this).attr("key");
$("#x").html(keyval);
})
<div key="1">
<div key="2">
<div key="3">  

//第一种方法 $(document).ready(function(){
    var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
    if(defaultValue==''){
        input.value=text}
        input.onfocus=function(){
            if(input.value===text){this.value=''}};
            input.onblur=function(){if(input.value===''){this.value=text}}};
            if(!supportPlaceholder){
                for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');
                if(input.type==='text'&&text){placeholder(input)}}}});

您可能感兴趣的文章:

  • js兼容的placeholder属性详解
  • js模仿html5 placeholder适应于不支持的浏览器
  • javascript 文本框水印/占位符(watermark/placeholder)实现方法
  • 让低版本浏览器支持input的placeholder属性(js方法)
  • 两种方法基于jQuery实现IE浏览器兼容placeholder效果
  • 使用jQuery快速解决input中placeholder值在ie中无法支持的问题
  • IE下支持文本框和密码框placeholder效果的JQuery插件分享
  • 基于jQuery的让非HTML5浏览器支持placeholder属性的代码
  • jQuery实现的placeholder效果完整实例
  • jQuery插件EnPlaceholder实现输入框提示文字
  • 基于JS实现html中placeholder属性提示文字效果示例

$(window).bind( 'resize', function(e){
 for(var i = 0, len = customPlaceholders.length; i < len; i++){
  var customPlaceholder = customPlaceholders[i];
  customPlaceholder.position();
 }

怎遍历PlaceHolder中动态添加的同一属性控件

using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

namespace SantGo.Bunli.Web
{

public partial class Site1 : System.Web.UI.MasterPage
{
protected void Page_Load( object sender, EventArgs e )
{
if( !IsPostBack )
{
List<Control> checkBoxList = new List<Control>();

FindSubControls( ContentPlaceHolder1, checkBoxList, new ControlMatchHander( CheckBoxMatchFunc ) );

foreach ( CheckBox checkBox in checkBoxList )
{
divDebug.InnerHtml += string.Format( "{0}, {1}<br />",
checkBox.ID,
checkBox.ClientID );
}

}

}

protected delegate bool ControlMatchHander( Control control );

protected void FindSubControls( Control control, IList<Control> saveCollection, ControlMatchHander matchFunc )
{
if ( control.HasControls() )
{
foreach ( Control subControl in control.Controls )
{
FindSubControls( subControl, saveCollection, matchFunc );
}
}
else
{
......余下全文>>  

HTML5中文本框的新属性placeholder是个非常好用的属性,但是IE系列直至IE9都不支持这...

您可能感兴趣的文章:

  • js兼容的placeholder属性详解
  • js模仿html5 placeholder适应于不支持的浏览器
  • javascript 文本框水印/占位符(watermark/placeholder)实现方法
  • 让低版本浏览器支持input的placeholder属性(js方法)
  • 两种方法基于jQuery实现IE浏览器兼容placeholder效果
  • IE下支持文本框和密码框placeholder效果的JQuery插件分享
  • 基于jQuery的让非HTML5浏览器支持placeholder属性的代码
  • jQuery实现的placeholder效果完整实例
  • jQuery实现的一个自定义Placeholder属性插件
  • jQuery插件EnPlaceholder实现输入框提示文字
  • 基于JS实现html中placeholder属性提示文字效果示例

复制代码 代码如下:

...

jQuery实现的一个自定义Placeholder属性插件,jqueryplaceholder

HTML5中文本框的新属性placeholder是个非常好用的属性,但是IE系列直至IE9都不支持这一属性,这就让大家在用这一属性的时候有些犹豫不决。自己曾经写过很多类似共的小控件,但是都不是很通用,这里分享一个渐进增强的自定义placeholder的jQuery插件。有点是使用简单,大家也可以根据自己的需要进行改进。平常写jQuery插件比较少,考虑到用jQuery的同学比较多,这里就用jQuery插件的形式编写了。

在这里简单的介绍一下实现思路。

1.表现与html5原生的placeholder尽量类似
2.渐进增强对于支持placeholder的浏览器不做处理

一、首先是几个工具方法:

1.supportProperty(nodeType, property),获取浏览器是否支持某一控件的某一属性
2.getPositionInDoc(target, parent),获取对象在文档中的位置
3.$c,一个快速创建Dom对象的方法

这几个工具方法都是一些比较常见通用的方法,如果你有自己的或者更合适的可以自行替换。

二、主体,CustomPlaceholder对象。这个对象主要是维护每一个文本框的信息,包括其位置,应该显示的提示信息等等,另外它还包含创建提示信息以及定位等方法以及对象的相应事件。

事件主要是在initEvents函数中进行的处理,这里特别要注意的是对提示信息事件的处理,当提示信息被点击时焦点应该被重新定位到文本框。而文本框要处理的则是focus和blur事件。

复制代码 代码如下:

$(self.hint).bind( 'click', function(e){
 self.input.focus();
});

$(self.input).bind( 'focus', function(e){
 self.hint.style.display = 'none';
});

$(self.input).bind( 'blur', function(e){
 if(this.value == ''){
  self.hint.style.display = 'inline';
 }
});

CustomPlacehodler对象的两个主要方法是createHintLabel(text, position)和position()。createHintLabel是用于创建提示信息的DOM对象并对其进行定位,并返回这个对象。position方法用于强制对提示消息进行重新定位。主要用于页面大小改变的情况。这两个方法的功能和实现都比较简单。

三、插件的功能实现部分。jQuery插件实现方式就不多说了。这里首先进行了能力检测,如果原生支持placeholder则直接返回。

复制代码 代码如下:

if(supportProperty('input', 'placeholder')){
 return;
}

接下来是根据选择的input对象,生成相应的CustomPlaceholder对象,保存在数组中,并获取每个对象的提示信息的DOM对象,添加到容器中,最后将容器附加到body对象中。

复制代码 代码如下:

var customPlaceholders = [];
if(this.length > 0){
 var box = $c('div', 'dk_placeholderfixed_box');
 for(var i = 0, len = this.length; i < len; i++){
  var input = this[i];
  customPlaceholders.push(new CustomPlaceholder(box, input, option));
 }

 document.body.appendChild(box);
}

最后还有一件比较重要的事情,为window对象绑定resize事件,当window对象触发resize事件时对所有的customPlacehoder对象进行重新定位。

复制代码 代码如下:

$(window).bind( 'resize', function(e){
 for(var i = 0, len = customPlaceholders.length; i < len; i++){
  var customPlaceholder = customPlaceholders[i];
  customPlaceholder.position();
 }

});

这个简单的小插件到这里就写完了。

插件源码:

(function($){

var eles = {
 div: document.createElement('div'),
 ul: document.createElement('ul'),
 li: document.createElement('li'),
 span: document.createElement('span'),
 p: document.createElement('p'),
 a: document.createElement('a'),
 fragment: document.createDocumentFragment(),
 input: document.createElement('input')
}

var supportProperty = function(nodeType, property){
 switch(arguments.length){
  case 0:
   return false;
  case 1:
   var property = nodeType, nodeType = 'div';
   property = property.split('.');

   if(property.length == 1){
    return typeof eles[nodeType][property[0]] !== 'undefined';
   }else if(property.length == 2){
    return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
   }
  case 2:
   property = property.split('.');

   if(property.length == 1){
    return typeof eles[nodeType][property[0]] !== 'undefined';
   }else if(property.length == 2){
    return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
   }

   return false;


  default:
   return false;
 }
};

var getPositionInDoc = function(target, parent) {
 if (!target) {
  return null;
 }
 var left = 0,
  top = 0;
 do {
  left += target.offsetLeft || 0;
  top += target.offsetTop || 0;
  target = target.offsetParent;
  if(parent && target == parent){
   break;
  }
 } while (target);
 return {
  left: left,
  top: top
 };
}

var $c = function(tagName, id, className){
 var ele = null;
 if(!eles[tagName]){
  ele = eles[tagName] = document.createElement(tagName);
 }else{
  ele = eles[tagName].cloneNode(true);
 }
 if(id){
  ele.id = id;
 }
 if(className){
  ele.className = className;
 }
 return ele;
};

var CustomPlaceholder = function(box, input, option){
 var self = this;
 var position = getPositionInDoc(input);
 self.input = input;

 self.option = {xOffset:0, yOffset:0};
 for(var item in option){
  self.option[item] = option[item];
 }
 self.hint = self.createHintLabel(input.getAttribute('placeholder'), position);
 box.appendChild(self.hint);

 self.initEvents = function(){
  $(self.hint).bind( 'click', function(e){
   self.input.focus();
  });

  $(self.input).bind( 'focus', function(e){
   self.hint.style.display = 'none';
  });

  $(self.input).bind( 'blur', function(e){
   if(this.value == ''){
    self.hint.style.display = 'inline';
   }
  });
 };

 self.initEvents();
};

CustomPlaceholder.prototype = {
 createHintLabel: function(text, position){
  var hint = $c('label');
  hint.style.cusor = 'text';
  hint.style.position = 'absolute';
  hint.style.left = position.left + this.option.xOffset + 'px';
  hint.style.top = position.top + this.option.yOffset + 'px';
  hint.innerHTML = text;
  hint.style.zIndex = '9999';
  return hint;
 },
 position: function(){
  var position = getPositionInDoc(this.input);
  this.hint.style.left = position.left + this.option.xOffset + 'px';
  this.hint.style.top = position.top + this.option.yOffset + 'px';
 }
};

$.fn.placeholder = function(option){
 if(supportProperty('input', 'placeholder')){
  return;
 }
 var customPlaceholders = [];
 if(this.length > 0){
  var box = $c('div', 'dk_placeholderfixed_box');
  for(var i = 0, len = this.length; i < len; i++){
   var input = this[i];
   if($(input).is(':visible')){
    customPlaceholders.push(new CustomPlaceholder(box, input, option));
   }
  }

  document.body.appendChild(box);
 }

 $(window).bind( 'resize', function(e){
  for(var i = 0, len = customPlaceholders.length; i < len; i++){
   var customPlaceholder = customPlaceholders[i];
   customPlaceholder.position();
  }

 });
};

})(jQuery);

复制代码 代码如下:

if(supportProperty('input', 'placeholder')){
 return;
}

最后还有一件比较重要的事情,为window对象绑定resize事件,当window对象触发resize事件时对所有的customPlacehoder对象进行重新定位。

//第二种方法
$(function(){
if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
};
})
function placeholderSupport() {
    return 'placeholder' in document.createElement('input');
}
</script>

$(window).bind( 'resize', function(e){
 for(var i = 0, len = customPlaceholders.length; i < len; i++){
  var customPlaceholder = customPlaceholders[i];
  customPlaceholder.position();
 }

1.表现与html5原生的placeholder尽量类似
2.渐进增强对于支持placeholder的浏览器不做处理
1.首先是几个工具方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

这个简单的小插件到这里就写完了。

事件主要是在initEvents函数中进行的处理,这里特别要注意的是对提示信息事件的处理,当提示信息被点击时焦点应该被重新定位到文本框。而文本框要处理的则是focus和blur事件。

</head>
<body>
<form>
  <label for="name">用户名:</label>
  <input type="text" placeholder="请输入用户名"/>
</form>
</body>
</html>

CustomPlacehodler对象的两个主要方法是createHintLabel(text, position)和position()。createHintLabel是用于创建提示信息的DOM对象并对其进行定位,并返回这个对象。position方法用于强制对提示消息进行重新定位。主要用于页面大小改变的情况。这两个方法的功能和实现都比较简单。

复制代码

(function($){

var eles = {
 div: document.createElement('div'),
 ul: document.createElement('ul'),
 li: document.createElement('li'),
 span: document.createElement('span'),
 p: document.createElement('p'),
 a: document.createElement('a'),
 fragment: document.createDocumentFragment(),
 input: document.createElement('input')
}

var supportProperty = function(nodeType, property){
 switch(arguments.length){
  case 0:
   return false;
  case 1:
   var property = nodeType, nodeType = 'div';
   property = property.split('.');

   if(property.length == 1){
    return typeof eles[nodeType][property[0]] !== 'undefined';
   }else if(property.length == 2){
    return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
   }
  case 2:
   property = property.split('.');

   if(property.length == 1){
    return typeof eles[nodeType][property[0]] !== 'undefined';
   }else if(property.length == 2){
    return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
   }

   return false;


  default:
   return false;
 }
};

var getPositionInDoc = function(target, parent) {
 if (!target) {
  return null;
 }
 var left = 0,
  top = 0;
 do {
  left += target.offsetLeft || 0;
  top += target.offsetTop || 0;
  target = target.offsetParent;
  if(parent && target == parent){
   break;
  }
 } while (target);
 return {
  left: left,
  top: top
 };
}

var $c = function(tagName, id, className){
 var ele = null;
 if(!eles[tagName]){
  ele = eles[tagName] = document.createElement(tagName);
 }else{
  ele = eles[tagName].cloneNode(true);
 }
 if(id){
  ele.id = id;
 }
 if(className){
  ele.className = className;
 }
 return ele;
};

var CustomPlaceholder = function(box, input, option){
 var self = this;
 var position = getPositionInDoc(input);
 self.input = input;

 self.option = {xOffset:0, yOffset:0};
 for(var item in option){
  self.option[item] = option[item];
 }
 self.hint = self.createHintLabel(input.getAttribute('placeholder'), position);
 box.appendChild(self.hint);

 self.initEvents = function(){
  $(self.hint).bind( 'click', function(e){
   self.input.focus();
  });

  $(self.input).bind( 'focus', function(e){
   self.hint.style.display = 'none';
  });

  $(self.input).bind( 'blur', function(e){
   if(this.value == ''){
    self.hint.style.display = 'inline';
   }
  });
 };

 self.initEvents();
};

CustomPlaceholder.prototype = {
 createHintLabel: function(text, position){
  var hint = $c('label');
  hint.style.cusor = 'text';
  hint.style.position = 'absolute';
  hint.style.left = position.left + this.option.xOffset + 'px';
  hint.style.top = position.top + this.option.yOffset + 'px';
  hint.innerHTML = text;
  hint.style.zIndex = '9999';
  return hint;
 },
 position: function(){
  var position = getPositionInDoc(this.input);
  this.hint.style.left = position.left + this.option.xOffset + 'px';
  this.hint.style.top = position.top + this.option.yOffset + 'px';
 }
};

$.fn.placeholder = function(option){
 if(supportProperty('input', 'placeholder')){
  return;
 }
 var customPlaceholders = [];
 if(this.length > 0){
  var box = $c('div', 'dk_placeholderfixed_box');
  for(var i = 0, len = this.length; i < len; i++){
   var input = this[i];
   if($(input).is(':visible')){
    customPlaceholders.push(new CustomPlaceholder(box, input, option));
   }
  }

  document.body.appendChild(box);
 }

 $(window).bind( 'resize', function(e){
  for(var i = 0, len = customPlaceholders.length; i < len; i++){
   var customPlaceholder = customPlaceholders[i];
   customPlaceholder.position();
  }

 });
};

})(jQuery);

 代码如下

1.表现与html5原生的placeholder尽量类似
2.渐进增强对于支持placeholder的浏览器不做处理

 代码如下

});

 document.body.appendChild(box);
}

接下来是根据选择的input对象,生成相应的CustomPlaceholder对象,保存在数组中,并获取每个对象的提示信息的DOM对象,添加到容器中,最后将容器附加到body对象中。

});

$(self.input).bind( 'focus', function(e){
 self.hint.style.display = 'none';
});

var customPlaceholders = [];
if(this.length > 0){
 var box = $c('div', 'dk_placeholderfixed_box');
 for(var i = 0, len = this.length; i < len; i++){
  var input = this[i];
  customPlaceholders.push(new CustomPlaceholder(box, input, option));
 }

在这里简单的介绍一下实现思路。

 代码如下

复制代码 代码如下:

■supportProperty(nodeType, property),获取浏览器是否支持某一控件的某一属性
■getPositionInDoc(target, parent),获取对象在文档中的位置
■$c,一个快速创建Dom对象的方法
这几个工具方法都是一些比较常见通用的方法,如果你有自己的或者更合适的可以自行替换。

$(self.hint).bind( 'click', function(e){
 self.input.focus();
});

复制代码

1.supportProperty(nodeType, property),获取浏览器是否支持某一控件的某一属性
2.getPositionInDoc(target, parent),获取对象在文档中的位置
3.$c,一个快速创建Dom对象的方法

3.插件的功能实现部分。jQuery插件实现方式就不多说了。这里首先进行了能力检测,如果原生支持placeholder则直接返回。

插件源码:

$(self.input).bind( 'focus', function(e){
 self.hint.style.display = 'none';
});

事件主要是在initEvents函数中进行的处理,这里特别要注意的是对提示信息事件的处理,当提示信息被点击时焦点应该被重新定位到文本框。而文本框要处理的则是focus和blur事件。

复制代码

var customPlaceholders = [];
if(this.length > 0){
 var box = $c('div', 'dk_placeholderfixed_box');
 for(var i = 0, len = this.length; i < len; i++){
  var input = this[i];
  customPlaceholders.push(new CustomPlaceholder(box, input, option));
 }

$(self.input).bind( 'blur', function(e){
 if(this.value == ''){
  self.hint.style.display = 'inline';
 }
});

最后还有一件比较重要的事情,为window对象绑定resize事件,当window对象触发resize事件时对所有的customPlacehoder对象进行重新定位。

}接下来是根据选择的input对象,生成相应的CustomPlaceholder对象,保存在数组中,并获取每个对象的提示信息的DOM对象,添加到容器中,最后将容器附加到body对象中。

复制代码 代码如下:

在这里简单的介绍一下实现思路。

二、主体,CustomPlaceholder对象。这个对象主要是维护每一个文本框的信息,包括其位置,应该显示的提示信息等等,另外它还包含创建提示信息以及定位等方法以及对象的相应事件。

if(supportProperty('input', 'placeholder')){
 return;

HTML5中文本框的新属性placeholder是个非常好用的属性,但是IE系列直至IE9都不支持这一属性,这就让大家在用这一属性的时候有些犹豫不决。自己曾经写过很多类似共的小控件,但是都不是很通用,这里分享一个渐进增强的自定义placeholder的jQuery插件。有点是使用简单,大家也可以根据自己的需要进行改进。平常写jQuery插件比较少,考虑到用jQuery的同学比较多,这里就用jQuery插件的形式编写了。

 代码如下

三、插件的功能实现部分。jQuery插件实现方式就不多说了。这里首先进行了能力检测,如果原生支持placeholder则直接返回。

这个简单的小插件到这里就写完了。

一、首先是几个工具方法:

$(self.hint).bind( 'click', function(e){
 self.input.focus();
});

这几个工具方法都是一些比较常见通用的方法,如果你有自己的或者更合适的可以自行替换。

2.主体,CustomPlaceholder对象。这个对象主要是维护每一个文本框的信息,包括其位置,应该显示的提示信息等等,另外它还包含创建提示信息以及定位等方法以及对象的相应事件。

 document.body.appendChild(box);
}

复制代码

复制代码 代码如下:

CustomPlacehodler对象的两个主要方法是createHintLabel(text, position)和position()。createHintLabel是用于创建提示信息的DOM对象并对其进行定位,并返回这个对象。position方法用于强制对提示消息进行重新定位。主要用于页面大小改变的情况。这两个方法的功能和实现都比较简单。

本文由美高梅网址发布于关于美高梅,转载请注明出处:jQuery实现的一个自定义Placeholder属性插件,jQuer

上一篇:使用时间戳解决ie缓存的问题,请求加时间戳防止 下一篇:没有了
猜你喜欢
热门排行
精彩图文