JQuery占位符HTML5模拟器 [英] JQuery placeholder HTML5 simulator

问题描述

我一直在使用HTML 5占位符，并且意识到它在HTML5设备之外无效。正如您在下面的代码中看到的，占位符始终为小写，值始终为大写。

I have been using the HTML 5 placeholder and just realised that it does not work outside HTML5 devices. As you can see by the code below the placeholder is always in lowercase and the value is always in upper case.

#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。

This is all fine except when dealing with non HTML 5 devices. For this I have employed a bastardised bit of 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方式。现在虽然上面的内容确实有效（合理地），但是它不会响应将占位符保持为小写，并且大写的值是大写的，因为它使用占位符设置值。

Firstly this Javascript is rancid. There must be an easier JQuery way. Now although this above does work (reasonably) it does not respond to keeping the placeholder in lowercase and the value in uppercase since it sets the value with the placeholder.

I'我们用一个漂亮的小提琴 http://jsfiddle.net/Z9YLZ/1/ 为你安排好了/ p>

I've set you all up with a nice Fiddle 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();
    });
});

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

Edit: Explicitly declare the text-transform to cascade properly.

这篇关于JQuery占位符HTML5模拟器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！