Я пытаюсь изменить форму. Стилизация 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');
    }
});

Но это не сработало, и я не знаю почему.

Спасибо.

0
super11 15 Дек 2015 в 18:24

6 ответов

Лучший ответ

Я сделал некоторые изменения, которые обрабатывают всю функциональность заполнителя. Это работает с тем фактом, что вы используете заполнитель данных, а не заполнитель. Вы, вероятно, сможете удалить плагин и использовать только это.

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');;
      }
    });
  });
});

Работающий JSFIDDLE

1
Magnus Engdal 15 Дек 2015 в 16:06

Присвойте свой атрибут данных значение, и вам не нужно устанавливать стили через 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);
    ...
1
Chris 15 Дек 2015 в 15:30

Вы можете сделать это с помощью только CSS

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;  
}
<input type="text" placeholder="Enter text">
1
Nenad Vracar 15 Дек 2015 в 15:30

Попробуйте это, вам нужно проверить, когда происходит действие:

$(allInputs).on('blur input change', function(){
    if($(allInputs).val().length === 0) {
        $(this).css('font-style', 'italic');
    }
});
0
Darren Sweeney 15 Дек 2015 в 15:31

Вам нужно сделать небольшое изменение :)

$(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();
    });

});
0
Sudipta Mondal 15 Дек 2015 в 15:41

На самом деле вам нужно поймать два события нажатия клавиш и размытия.

Проверьте этот пример

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');
   }
});

пример ссылки

0
Yousaf 15 Дек 2015 в 16:05