質問

プレースホルダーデータを持つ剣道UI datepickerがあります。ここに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 datepickerは、ユーザーが入力したデータと同じスタイルでプレースホルダーデータを表示します。プレースホルダーデータのスタイルを別の方法で変更したいと思います。具体的には、テキストを灰色で斜体にしたいと思います。ユーザーがデータを入力すると、スタイルは黒(斜体ではない)に変わります。これを行う方法について何か考えはありますか?

役に立ちましたか?

解決

まあ, placeholder Html5のattibuteであり、剣道のコントロールには特別ではありません。私が理解しているように、Kendoはブラウザでサポートされているものよりもプレースホルダーのサポートを提供しておらず、一部のブラウザのみがこの属性をサポートしていることを覚えておいてください;IEはそうではありません。とにかく、プレースホルダのスタイルを設定するには、vendor prefix CSSプロパティを使用する必要があります, こちらをご覧ください.

他のヒント

私はこれを使います。これはあなたの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>
.

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top