占位符jquery-编程焦点

占位符jquery-编程焦点,jquery,jquery-plugins,placeholder,Jquery,Jquery Plugins,Placeholder,使用下面的jquery占位符插件创建标签并用标签覆盖字段 我的问题是我有字段验证和一个函数,该函数将焦点放在返回验证错误的字段上 通过编程设置焦点,标签/占位符将保持不变。如果我点击该字段,它就会正常工作 有什么明显的解决办法吗 /***************************************************************************** jQuery Placeholder 1.1.1 Copyright (c) 2010 Michael J.

使用下面的jquery占位符插件创建标签并用标签覆盖字段

我的问题是我有字段验证和一个函数,该函数将焦点放在返回验证错误的字段上

通过编程设置焦点,标签/占位符将保持不变。如果我点击该字段,它就会正常工作

有什么明显的解决办法吗

/*****************************************************************************
jQuery Placeholder 1.1.1

Copyright (c) 2010 Michael J. Ryan (http://tracker1.info/)

Dual licensed under the MIT and GPL licenses:
    http://www.opensource.org/licenses/mit-license.php
    http://www.gnu.org/licenses/gpl.html

------------------------------------------------------------------------------

Sets up a watermark for inputted fields... this will create a LABEL.watermark
tag immediately following the input tag, the positioning will be set absolute,
and it will be positioned to match the input tag.

To activate on all tags with a 'data-watermark' attribute:

    $('input[placeholder],textarea[placeholder]').placeholder();


To style the tags as appropriate (you'll want to make sure the font matches):

    label.placeholder {
        cursor: text;               <--- display a cursor to match the text input

        padding: 4px 4px 4px 4px;   <--- this should match the border+padding
                                            for the input field(s)
        color: #999999;             <--- this will display as faded
    }

You'll also want to have the color set for browsers with native support
    input:placeholder, textarea:placeholder {
        color: #999999;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: #999999;
    }

------------------------------------------------------------------------------

Thanks to...
    http://www.alistapart.com/articles/makingcompactformsmoreaccessible
    http://plugins.jquery.com/project/overlabel

    This works similar to the overlabel, but creates the actual label tag
    based on a data-watermark attribute on the input tag, instead of
    relying on the markup to provide it.

*****************************************************************************/
(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;

    $.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
            itemIn.call(this);
            itemOut.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);
        });
    };


    function bindEvents() {
        if (boundEvents) return;

        //prepare live bindings if not already done.
        $('.' + ph)
            .live('click',itemIn)
            .live('focusin',itemIn)
            .live('focusout',itemOut);
        bound = true;

        boundEvents = true;
    };

    function itemIn() {
        var input = $(this)
            ,label = $(input.data(phl));

        label.css('display', 'none');
    };

    function itemOut() {
        var that = this;

        //use timeout to let other validators/formatters directly bound to blur/focusout work first
        setTimeout(function(){
            var input = $(that);
            $(input.data(phl))
                .css('top', input.position().top + 'px')
                .css('left', input.position().left + 'px')
                .css('display', !!input.val() ? 'none' : 'block');
        }, 200);
    };

}(jQuery));
/*****************************************************************************
jQuery占位符1.1.1
版权所有(c)2010 Michael J.Ryan(http://tracker1.info/)
MIT和GPL许可下的双重许可:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
------------------------------------------------------------------------------
为输入的字段设置水印。。。这将创建一个LABEL.watermark
标签紧跟在输入标签之后,定位将设置为绝对,
它的位置将与输入标记相匹配。
要激活具有“数据水印”属性的所有标记,请执行以下操作:
$('input[placeholder],textarea[placeholder]).placeholder();
要根据需要设置标记样式(您需要确保字体匹配):
label.placeholder{
光标:text;调用聚焦字段的脚本时,请尝试:

$(元素).trigger('focus');

如果不起作用,请尝试其他事件,如或。

调用聚焦字段的脚本时尝试:

$(元素).trigger('focus');

如果不起作用,请尝试其他事件,如或。

确定-我已修复它

因为我是用另一个脚本设置焦点的,所以我需要将焦点(而不是focusin)添加到插件中:

.live('click',itemIn)
.live('focusin',itemIn)
.live('focus',itemIn)
.live('focusout',itemOut);
bound = true;
好的,我修好了

因为我是用另一个脚本设置焦点的,所以我需要将焦点(而不是focusin)添加到插件中:

.live('click',itemIn)
.live('focusin',itemIn)
.live('focus',itemIn)
.live('focusout',itemOut);
bound = true;

不幸的是,这不起作用。可能一个按键事件会以某种方式起作用?这段代码在哪里?:“我有一个字段验证和一个函数,它将焦点放在返回验证错误的字段上”看到我的答案,我正在设置焦点(而不是使用焦点)。不幸的是,这不起作用。可能一个按键事件会以某种方式起作用?这段代码在哪里“我有字段验证和一个函数,该函数将焦点放在返回验证错误的字段上”见我的回答,我是在设置焦点(不使用focusin)