如何让jQuery占位符/水印插件适用于ajax加载的文本字段
How to get jQuery placeholder/watermark plugin to work for ajax loaded text fields?
我正在使用以下占位符插件
(function($){
var ph = "PLACEHOLDER-INPUT";
var phl = "PLACEHOLDER-LABEL";
var boundEvents = false;
var default_options = {
labelClass: 'placeholder'
};
//check for native support for placeholder attribute, if so stub methods and return
var input = document.createElement("input");
if ('placeholder' in input) {
$.fn.placeholder = $.fn.unplaceholder = function(){}; //empty function
delete input; //cleanup IE memory
return;
};
delete input;
//bind to resize to fix placeholders when the page resizes (fields are hidden/displayed, which can change positioning).
$(window).resize(checkResize);
$.fn.placeholder = function(options) {
bindEvents();
var opts = $.extend(default_options, options)
this.each(function(){
var rnd=Math.random().toString(32).replace(/'./,'')
,input=$(this)
,label=$('<label style="position:absolute;display:none;top:0;left:0;"></label>');
if (!input.attr('placeholder') || input.data(ph) === ph) return; //already watermarked
//make sure the input tag has an ID assigned, if not, assign one.
if (!input.attr('id')) input.attr('id', 'input_' + rnd);
label .attr('id',input.attr('id') + "_placeholder")
.data(ph, '#' + input.attr('id')) //reference to the input tag
.attr('for',input.attr('id'))
.addClass(opts.labelClass)
.addClass(opts.labelClass + '-for-' + this.tagName.toLowerCase()) //ex: watermark-for-textarea
.addClass(phl)
.text(input.attr('placeholder'));
input
.data(phl, '#' + label.attr('id')) //set a reference to the label
.data(ph,ph) //set that the field is watermarked
.addClass(ph) //add the watermark class
.after(label) //add the label field to the page
//setup overlay
itemFocus.call(this);
itemBlur.call(this);
});
};
$.fn.unplaceholder = function(){
this.each(function(){
var input=$(this),
label=$(input.data(phl));
if (input.data(ph) !== ph) return;
label.remove();
input.removeData(ph).removeData(phl).removeClass(ph).unbind('change',itemChange);
});
};
function bindEvents() {
if (boundEvents) return;
//prepare live bindings if not already done.
$("form").live('reset', function(){
$(this).find('.' + ph).each(itemBlur);
});
$('.' + ph)
.live('keydown',itemFocus)
.live('mousedown',itemFocus)
.live('mouseup',itemFocus)
.live('mouseclick',itemFocus)
.live('focus',itemFocus)
.live('focusin',itemFocus)
.live('blur',itemBlur)
.live('focusout',itemBlur)
.live('change',itemChange);
;
$('.' + phl)
.live('click', function() { $($(this).data(ph)).focus(); })
.live('mouseup', function() { $($(this).data(ph)).focus(); });
bound = true;
boundEvents = true;
};
function itemChange() {
var input = $(this);
if (!!input.val()) {
$(input.data(phl)).hide();
return;
}
if (input.data(ph+'FOCUSED') != 1) {
showPHL(input);
}
}
function itemFocus() {
$($(this).data(ph+'FOCUSED',1).data(phl)).hide();
};
function itemBlur() {
var that = this;
showPHL($(this).removeData(ph+'FOCUSED'));
//use timeout to let other validators/formatters directly bound to blur/focusout work
setTimeout(function(){
var input = $(that);
//if the item wasn't refocused, test the item
if (input.data(ph+'FOCUSED') != 1) {
showPHL(input);
}
}, 200);
};
function showPHL(input, forced) {
var label = $(input.data(phl));
//if not already shown, and needs to be, show it.
if ((forced || label.css('display') == 'none') && !input.val())
label
.text(input.attr('placeholder'))
.css('top', input.position().top + 'px')
.css('left', input.position().left + 'px')
.css('display', 'block');
//console.dir({ 'input': { 'id':input.attr('id'), 'pos': input.position() }});
}
var cr;
function checkResize() {
if (cr) window.clearTimeout(cr);
cr = window.setTimeout(checkResize2, 50);
}
function checkResize2() {
$('.' + ph).each(function(){
var input = $(this);
var focused = $(this).data(ph+'FOCUSED');
if (!focused) showPHL(input, true);
});
}
}(jQuery));
它将占位符属性应用于浏览器中本身不支持占位符属性(例如 IE9)的表单字段。 它适用于静态加载的文本字段,但是对于通过 ajax 加载的文本字段,占位符不会出现。
是否可以在通过 ajax 加载的文本字段上实现这种"水印"效果?
如果在添加新输入后触发窗口大小调整功能会发生什么?
$(window).trigger('resize')
您可以在 AJAX 调用完成后将插件应用于新创建的控件。请原谅伪代码,因为我不太确定您的 AJAX 调用是如何工作的:
$.ajax({
url: "test.html",
cache: false
}).done(function( result ) {
field = $('<input>').html(result);
$("#results").append(field);
field.placeholder();
});
另一种选择是,您可以使用jQuery的.on()方法将动态创建的控件绑定到函数 - 但它需要一个事件(如单击)。我不确定你会怎么做。也许是这样的:
$( 'body' ).on('click','input.addField', function(e){
$(this).placeholder();
});
我知道这行不通,但也许它可以帮助你集思广益。
相关文章:
- Jquery Ajax POST不工作.适用于GET
- Ajax成功回调仅适用于Chrome
- 使用ajax上传图片仅适用于png
- Ajax,Php-Postback仅适用于Firefox
- 如何在mvc中使用ajax jquery上传文件仅适用于IE9
- Javascript / Ajax适用于Mozilla firefox,但不适用于Google Chrome和IE
- 我的函数仅适用于 ajax 调用后的警报
- 从服务器读取的 ajax 文件 w3schools.com 示例适用于 IE9,但不适用于 FF12
- 如何让jQuery占位符/水印插件适用于ajax加载的文本字段
- Ajax 调用 IE8 不显示所有数据,适用于 Firefox 和 IE9
- 除了Fiddler之外,还有其他适用于IE8的ajax调试器吗
- Jquery Prepend动画只适用于AJAX一次
- Android混合应用程序:JQueryMobile ajax不适用于https,但适用于http
- Ajax函数仅适用于alert()
- 动态菜单的Ajax调用适用于first
- Jquery ajax适用于Chrome和Safari,但不适用于IE8和Firefox
- 在等待AJAX回调时更改image src:仅适用于Firefox
- Ajax php登录只适用于alert();
- Ajax适用于Firefox,但不适用于Internet Explorer-需要更新XML文件-未收到错误消息
- 对 php 服务的经过身份验证的 AJAX 请求(适用于 Wordpress)