-
12-12-2019 - |
質問
プレースホルダーデータを持つ剣道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>
. 所属していません StackOverflow