JQuery 占位符 HTML5 模拟器

Question

我一直在使用 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 设备外，这一切都很好。为此，我使用了一些糟糕的 javascript。

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 方式。现在，尽管上述方法确实有效（合理地），但它不会响应将占位符保持为小写而将值保持为大写，因为它使用占位符设置值。

我已经为你们准备好了一把好听的 Fiddle http://jsfiddle.net/Z9YLZ/1/

Answer 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();
    });
});

编辑：明确声明文本转换以正确级联。

Answer 2

试试这个，我用了一段时间，效果很好：

(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）

Answer 3

试试这个：http://jsfiddle.net/msm595/Z9YLZ/12/

Answer 4

有点晚了，但这就是我要做的。在页面加载时存储所有默认值，然后仅在单击默认值时清除值文本。这样可以防止 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
    }

});

});