JQuery占位符HTML5模拟器

JQuery placeholder HTML5 simulator

本文关键字：模拟器 HTML5 占位符 JQuery      更新时间：2023-09-26

我一直在使用HTML5占位符，刚刚意识到它在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"/>

除了处理非HTML5设备外，这一切都很好。为此，我使用了一点糟糕的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方法。现在，尽管上面的内容确实有效（合理地），但它不会对保持小写占位符和大写值做出响应，因为它使用占位符设置值。

我给你们准备了一个漂亮的Fiddlehttp://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.holder进行样式设置，使其看起来与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
    }
});
});
相关文章：