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

为您的数据属性赋值，您不必通过JS设置样式。

input[data-placeholder="1"] {font-style: italic;}
input[data-placeholder="0"] {font-style: normal;}

和js看起来像

$('input[data-placeholder]').keypress(function() {
    if($(this).val().length > 0) {
        $(this).data('placeholder', 0);
    ...

Answer 2

你可以用CSS

来做到这一点

＆＃13;

input::-webkit-input-placeholder {
   font-style: italic;
}

input:-moz-placeholder { 
   font-style: italic;  
}

input::-moz-placeholder { 
   font-style: italic;  
}

input:-ms-input-placeholder {  
   font-style: italic;  
}

＆＃13;

<input type="text" placeholder="Enter text">

＆＃13;

Answer 3

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

<强> 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

Answer 4

试试这个，你需要检查一个动作何时发生：

$(allInputs).on('blur input change', function(){
    if($(allInputs).val().length === 0) {
        $(this).css('font-style', 'italic');
    }
});

Answer 5

你需要做一个小改动：）

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

        if($(allInputs).val().length === 0) { // this had to be added inside the event.
           $(this).css('font-style', 'italic');
        }

       preventDefault();
    });

});

Answer 6

实际上你需要赶上两个事件按键和模糊。

检查此示例

html 
<body>
<input type="text" class="input-text" placeholder="Enter text" />
</body>

css 
.input-text {
 font-style:italic;
} 
$('.input-text').blur(function(){
   var text_length = $('.input-text').val();
   if(text_length == 0) {
      $('.input-text').css('font-style','italic');
   }else {
      $('.input-text').css('font-style','normal');
   }
});
$('.input-text').keypress(function(){
   var text_length = $('.input-text').val();
   if(text_length == 0) {
      $('.input-text').css('font-style','italic');
   }else {
      $('.input-text').css('font-style','normal');
   }
});

example link

应用CSS并删除.keypress和删除CSS

6 个答案: