jQuery占位符HTML5模拟器

问题描述

| 我一直在使用HTML 5占位符，只是意识到它不适用于HTML5设备。如下面的代码所示，占位符始终为小写，值始终为大写。

#maphead input::-webkit-input-placeholder {
    text-transform:lowercase;
}
#maphead input:-moz-placeholder {
    text-transform:lowercase;
}
<input id=\"start\" type=\"text\" spellcheck=\"false\" placeholder=\"enter your post code\" style=\"text-transform:uppercase;\" class=\"capital\"/>

除非使用非HTML 5设备，否则一切都很好。为此，我雇用了一些混蛋。

function activatePlaceholders() {
        var detect = navigator.userAgent.toLowerCase(); 
        if (detect.indexOf(\"safari\") > 0) return false;
        var inputs = document.getElementsByTagName(\"input\");
        for (var i=0;i<inputs.length;i++) {
            if (inputs[i].getAttribute(\"type\") == \"text\") {
                var placeholder = inputs[i].getAttribute(\"placeholder\");
                if (placeholder.length > 0 || value == placeholder) {
                    inputs[i].value = placeholder;
                    inputs[i].onclick = function() {
                        if (this.value == this.getAttribute(\"placeholder\")) {
                            this.value = \"\";
                        }

                        return false;
                    }
                    inputs[i].onblur = function() {
                        if (this.value.length < 1) {
                            this.value = this.getAttribute(\"placeholder\");
                            $(\'.capital\').each(function() {
            var current = $(this).val();
            var place = $(this).attr(\'placeholder\');
            if (current == place) {
                $(this).css(\'text-transform\',\'lowercase\')
            }
            });
                        }
                    }
                }
            }
        }
    }

    window.onload = function() {
        activatePlaceholders();
    }

首先，这个Javascript很烂。必须有一个更简单的JQuery方法。现在，尽管上面的方法确实（合理地）起作用了，但是由于它使用占位符设置了值，因此对于将占位符保持为小写字母和将值保持为大写字母没有响应。 我已经用一个不错的小提琴来设置所有人http://jsfiddle.net/Z9YLZ/1/     

解决方法

        尝试这样的事情：

$(function() {
    $(\'input[type=\"text\"]\').each(function () {
        $(this).focus(function () {
            if ($(this).attr(\'value\') === $(this).attr(\'placeholder\')) {
                $(this).css(\'text-transform\',\'lowercase\');
                $(this).attr(\'value\',\'\');
            }
        }).blur(function () {
            if ($(this).attr(\'value\') === \'\') {
                $(this).css(\'text-transform\',\'uppercase\');
                $(this).attr(\'value\',$(this).attr(\'placeholder\'));
            }
        }).blur();
    });
});

编辑：显式声明文本转换正确地级联。     ,        试试这个，我用了一段时间了，效果很好：

(function($,undefined) {

var input = document.createElement(\'input\');
if (\'placeholder\' in input) {
    $.fn.hinttext = $.hinttext = $.noop;
    $.hinttext.defaults = {};
    delete input;
    return;
}
delete input;

var boundTo = {},expando = +new Date + Math.random() * 100000 << 1,prefix = \'ht_\',dataName = \'hinttext\';

$.fn.hinttext = function(options) {

    if (options == \'refresh\') {

    return $(this).each(function() {
        if ($(this).data(dataName) != null) {
            focusout.call(this);
        }
    });
    }

    options = $.extend({},$.hinttext.defaults,options);

    if (!(options.inputClass in boundTo)) {

    $(\'.\' + options.inputClass)
        .live(\'focusin click\',function() {
        $($(this).data(dataName)).hide();
        })
        .live(\'focusout\',focusout);
    boundTo[options.inputClass] = true;
        }

    return $(this).each(function(){

    var input = $(this),placeholder = input.attr(\'placeholder\');

        if (placeholder && input.data(dataName) === undefined) {

        var input_id = input.attr(\'id\'),label_id = prefix + expando++;

        if (!input_id) {
            input.attr(\'id\',input_id = prefix + expando++);
        }

        $(\'<label/>\')
            .hide()
            .css(\'position\',options.labelPosition)
            .addClass(options.labelClass)
            .text(placeholder)
            .attr(\'for\',input_id)
            .attr(\'id\',label_id)
            .insertAfter(input);

        input
            .data(dataName,\'#\' + label_id)
            .addClass(options.inputClass)
            .change(function() {
                focusout.call(this);
            });
        }

        focusout.call(this);
    });
};

$.hinttext = function(selector,options) {
    if (typeof selector != \'string\') {
        options = selector;
        selector = \'input[placeholder],textarea[placeholder]\';
    }
    $(selector).hinttext(options);
    return $;
};

$.hinttext.defaults = {
    labelClass: \'placeholder\',inputClass: \'placeholder\',labelPosition: \'absolute\'
};

function focusout() {

    var input = $(this),pos = input.position();

    $(input.data(dataName)).css({
        left: pos.left + \'px\',top: pos.top + \'px\',width: input.width() + \'px\',height: input.height() + \'px\'
    })

    .text(input.attr(\'placeholder\'))

    [[\'show\',\'hide\'][!!input.val().length * 1]]();
}

$($.hinttext);

})(jQuery);

您只需要确保将CSS的label.placeholder样式设置为与HTML5占位符文本相同（颜色：＃999）     ,        试试这个：http://jsfiddle.net/msm595/Z9YLZ/12/     ,        有点晚了，但这是我的工作。将所有默认值存储在页面加载时，然后仅在单击默认值时清除值文本。这样可以防止JS清除用户输入的文本。

jQuery(document).ready(function($){

var x = 0; // count for array length

$(\"input.placeholder\").each(function(){
    x++; //incrementing array length
});

var _values = new Array(x); //create array to hold default values

x = 0; // reset counter to loop through array

$(\"input.placeholder\").each(function(){ // for each input element
    x++;
    var default_value = $(this).val(); // get default value.
    _values[x] = default_value; // create new array item with default value
});

var current_value; // create global current_value variable

$(\'input.placeholder\').focus(function(){
    current_value = $(this).val(); // set current value
    var is_default = _values.indexOf(current_value); // is current value is also default value

    if(is_default > -1){ //i.e false
        $(this).val(\'\'); // clear value
    }
});

$(\'input.placeholder\').focusout(function(){
    if( $(this).val() == \'\'){ //if it is empty...
        $(this).val(current_value); //re populate with global current value
    }

});

});