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.Теперь, хотя это выше работает (разумно), оно не реагирует на сохранение заполнителя в нижнем регистре и значения в верхнем регистре, так как оно устанавливает значение с заполнителем.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

Немного поздно, но вот что я делаю.Сохраняйте все значения по умолчанию при загрузке страницы, а затем очищайте текст значения ТОЛЬКО при щелчке по значению по умолчанию.Это предотвращает очистку введенного пользователем текста 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
    }

});

});

Answer 3

Попробуйте это: http://jsfiddle.net/msm595/Z9YLZ/12/

Answer 4

Попробуйте, я пользуюсь некоторое время, и он отлично работает:

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

Вам просто нужно убедиться, что style label.placeholder с CSS, чтобы он выглядел так же, как HTML5 placeholder text (color: # 999)