javascript - 在 .keypress 和删除上应用 CSS 和删除 CSS

Question

我正在尝试修改表单。为 data-placeholder 设置样式并没有真正成功，我转向了 jQuery。

所以占位符的样式是

input[data-placeholder] {font-style: italic;}

这很好。

现在我需要在用户输入数据时将其变为“正常”，我使用 jQuery 做到了这一点:

$(function() {
  var allInputs = $(":input");
  $(allInputs).keypress(function() {
    $(this).css('font-style', 'normal');
  });
  preventDefault();
});

现在当用户删除文本时占位符保持“正常”。

当用户删除文本时，我需要将 data-placeholder 设置为 italic。因此，我需要在删除文本后将其恢复为旧设置。

我试过这个:

$(function() {
    var allInputs = $(":input");
    $(allInputs).keypress(function() {
        $(this).css('font-style', 'normal');
    });
    preventDefault();
    if($(allInputs).val().length === 0) {
        $(this).css('font-style', 'italic');
    }
});

但它没有用，我不知道为什么。

谢谢。

Answer 1

我做了一些更改来处理整个占位符功能。这是因为您使用的是数据占位符而不是占位符。您应该可以删除该插件并仅使用它。

CSS

input[data-placeholder] {
  font-style: italic;
}

input[data-placeholder].selected {
  font-style: normal;
}

jQuery

$(document).ready(function() {
  $("input:text").each(function() {
    $(this).val($(this).data('placeholder')).focus(function() {
      if ($(this).val() == $(this).data('placeholder')) {
        $(this).val('').addClass('selected');
      }
    }).blur(function() {
      if ($(this).val().length == 0) {
        $(this).val($(this).data('placeholder')).removeClass('selected');;
      }
    });
  });
});

Working JSFIDDLE