javascript - 在模糊上更改 css

Question

所以我有一些必需inputs的和一些正常的输入（非必需）。必需的有红色border，而普通的没有。

<input type='text'>
<br>
<input type='text' class="required">

我希望所需的输入在其中有一些内容时失去边框并成为正常输入，但如果内容设置为空，我希望它们返回红色边框。

我已经实现了这一点，但我正在使用的脚本也影响了正常输入，我不想将边框更改为红色。

//sets value back to empty when focused
$('input:text').focus(function () {
    $(this).val('');
});

//changes the border of the required inputs depending if their content is empty or not
$('input:text').blur(function () {
    if ($(this).val() != '') {
        $(this).css({
            border: '1px solid #c4c4c4',
            color: '#000000'
        });
    } else {
        $(this).css({
            border: '2px solid #FF0000',
            color: '#FF0000'
        });
    }
});

请检查此 JSFiddle 以获得更好的理解

Answer 1

尝试替换此代码：

$('input:text').blur(

有了这个：

$(':text.required').blur(

小提琴演示

Answer 2

只需选择具有所需类的输入

$('input.required').blur(
    .....

你正在选择input:text这个选择所有文本输入

小提琴

Answer 3

演示

$('input:text.required').blur(

function () {
    if (this.value != '') {
        $(this).css({
            border: '1px solid #c4c4c4',
            color: '#000000'
        });
    } else {
        $(this).css({
            border: '2px solid #FF0000',
            color: '#FF0000'
        });
    }
});

Answer 4

您假设使用Id识别所需的输入。现有代码是针对所有输入文本框的，因此存在问题。

//sets value back to empty when focused
 $('input:text').focus(

function () {
   $(this).val('');
});

//changes the border of the required inputs depending if their content is empty or not
  $('input:text #req').blur(    //modified line

function () {
  if ($(this).val() != '') {
      $(this).css({
          border: '1px solid #c4c4c4',
          color: '#000000'
      });
  } else {
    $(this).css({
        border: '2px solid #FF0000',
         color: '#FF0000'
    });
  }
});

JSFIDDLE