Javascript 在上应用CSS并删除CSS。按键并删除_Javascript_Jquery_Html_Css_Forms

Javascript 在上应用CSS并删除CSS。按键并删除
javascript jquery html css forms
Javascript 在上应用CSS并删除CSS。按键并删除,javascript,jquery,html,css,forms,Javascript,Jquery,Html,Css,Forms,我正在尝试修改表单。设置数据占位符的样式并没有真正成功，我已经转向jQuery 因此占位符的样式是 input[data-placeholder] {font-style: italic;} 这很好现在，当用户键入数据时，我需要将其设置为“正常”，我使用jQuery实现了这一点： $(function() { var allInputs = $(":input"); $(allInputs).keypress(function() { $(this).css('font-st
我正在尝试修改表单。设置
数据占位符的样式并没有真正成功，我已经转向jQuery
因此占位符的样式是
input[data-placeholder] {font-style: italic;}

这很好
现在，当用户键入数据时，我需要将其设置为“正常”，我使用jQuery实现了这一点：
$(function() {
  var allInputs = $(":input");
  $(allInputs).keypress(function() {
    $(this).css('font-style', 'normal');
  });
  preventDefault();
});

现在，当用户删除文本时，占位符保持“正常”
当用户删除文本时，我需要将数据占位符
设置为斜体
。因此，我需要在删除文本后将其恢复为旧设置
我确实试过：
$(function() {
    var allInputs = $(":input");
    $(allInputs).keypress(function() {
        $(this).css('font-style', 'normal');
    });
    preventDefault();
    if($(allInputs).val().length === 0) {
        $(this).css('font-style', 'italic');
    }
});

但它不起作用，我也不知道为什么
谢谢。
为您的数据属性指定一个值，您不必通过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);
    ...

给你的数据属性一个值，你不必通过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);
    ...

您只需使用CSS就可以做到这一点

input:：-webkit输入占位符{
字体：斜体；
}
输入：-moz占位符{
字体：斜体；
}
输入：：-moz占位符{
字体：斜体；
}
输入：-ms输入占位符{
字体：斜体；
}
您只需使用CSS即可做到这一点

input:：-webkit输入占位符{
字体：斜体；
}
输入：-moz占位符{
字体：斜体；
}
输入：：-moz占位符{
字体：斜体；
}
输入：-ms输入占位符{
字体：斜体；
}
尝试此操作，您需要检查何时发生操作：
$(allInputs).on('blur input change', function(){
    if($(allInputs).val().length === 0) {
        $(this).css('font-style', 'italic');
    }
});

尝试此操作，您需要检查何时发生操作：
$(allInputs).on('blur input change', function(){
    if($(allInputs).val().length === 0) {
        $(this).css('font-style', 'italic');
    }
});

您需要做一个小改动：）
您需要做一个小改动：）
我做了一些更改来处理整个占位符功能。这是因为您使用的是数据占位符而不是占位符。您应该能够删除插件，并且只使用它
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');;
      }
    });
  });
});

我做了一些更改来处理整个占位符功能。这是因为您使用的是数据占位符而不是占位符。您应该能够删除插件，并且只使用它
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');;
      }
    });
  });
});

实际上，您需要了解按键和模糊这两个事件
检查这个例子
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');
   }
});

html
css
.输入文本{
字体：斜体；
} 
$（'.input text'）.blur（函数（）{
var text_length=$（'.input text'）.val（）；
如果（文本长度==0）{
$（'.input text'）.css（'font-style'，'italic'）；
}否则{
$（'.input text'）.css（'font-style'，'normal'）；
}
});
$（'.input text'）.keypress（函数（）{
var text_length=$（'.input text'）.val（）；
如果（文本长度==0）{
$（'.input text'）.css（'font-style'，'italic'）；
}否则{
$（'.input text'）.css（'font-style'，'normal'）；
}
});

实际上，您需要了解按键和模糊这两个事件
检查这个例子
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');
   }
});

html
css
.输入文本{
字体：斜体；
} 
$（'.input text'）.blur（函数（）{
var text_length=$（'.input text'）.val（）；
如果（文本长度==0）{
$（'.input text'）.css（'font-style'，'italic'）；
}否则{
$（'.input text'）.css（'font-style'，'normal'）；
}
});
$（'.input text'）.keypress（函数（）{
var text_length=$（'.input text'）.val（）；
如果（文本长度==0）{
$（'.input text'）.css（'font-style'，'italic'）；
}否则{
$（'.input text'）.css（'font-style'，'normal'）；
}
});

请阅读问题。我没有占位符，只有数据占位符。已经尝试过了，但没有效果。因为我没有占位符，这是jQuery插件的一部分。只有数据占位符。请阅读问题。我没有占位符，只有数据占位符。已经尝试过了，但没有效果。因为我没有占位符，这是jQuery插件的一部分。只有数据占位符。@super11耶！我的错，按键事件无法捕获我们要求的长度。@super11耶！糟糕的是，按键事件无法捕获我们要求的长度。发生的是，假设我有3个输入和2个更改，第三个没有。看起来很接近，但不知道发生了什么。发生的是，假设我有3个输入和2个改变，第三个没有。似乎很接近，但无法确定发生了什么。这会影响我的#提交#btn输入。我试过包括.not（），但不起作用。零钱。更新了我的答案。这会影响我的#提交#btn输入。我试过包括.not（），但不起作用。零钱。更新了我的答案。