剑道 UI - 占位符 - 样式答案

【问题标题】：Kendo UI - Placeholder - Style剑道 UI - 占位符 - 样式
【发布时间】：2012-12-15 09:32:53
【问题描述】：

我有一个带有占位符数据的 Kendo UI 日期选择器。这是 HTML：

<input type="text" class="datepicker"' placeholder="yyyy-mm-dd" />

这里是 JavaScript：

var start = $(".datepicker").kendoDatePicker({
        format: "yyyy-MM-dd",
        parseFormats: ["MM/dd/yyyy"],
        change: startChange
    }).data("kendoDatePicker");

Kendo UI 日期选择器以与用户输入数据相同的样式显示占位符数据。我想以不同的方式设置占位符数据的样式。具体来说，我希望文本为灰色和斜体。当用户输入数据时，样式变为纯黑色（非斜体）。关于如何做到这一点的任何想法？

【问题讨论】：

标签： styles datepicker kendo-ui placeholder

【解决方案1】：

嗯，placeholder 是一种 HTML5 属性，并不是 Kendo 控件特有的。据我了解，Kendo 不支持浏览器支持的占位符，请记住只有某些浏览器支持此属性； IE 没有。无论如何，要设置占位符的样式，您必须使用供应商前缀 CSS 属性 see here。

【讨论】：

【解决方案2】：

我用这个..它可以在你的 HTML 上工作，你也可以设置它的样式:)

    <script>
    // This adds 'placeholder' to the items listed in the jQuery .support object. 
    jQuery(function() {
        jQuery.support.placeholder = false;
        test = document.createElement('input');
        if('placeholder' in test) jQuery.support.placeholder = true;
    });
    // This adds placeholder support to browsers that wouldn't otherwise support it. 
    $(function() {
        if(!$.support.placeholder) { 
            var active = document.activeElement;
            $(':text').focus(function () {
                if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                    $(this).val('').removeClass('hasPlaceholder');
                }
            }).blur(function () {
                if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                    $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                }
            });
            $(':text').blur();
            $(active).focus();
            $('form:eq(0)').submit(function () {
                $(':text.hasPlaceholder').val('');
            });
        }
    });
    </script>

【讨论】：