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

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

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

{{1}}

Check this JSFiddle for better understanding, please

Answer 1

尝试替换此代码：

$('input:text').blur(

用这个：

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

FIDDLE DEMO

Answer 2

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

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

您正在选择input:text此seletcs所有文字输入

fiddle

Answer 3

DEMO

$('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

改变模糊的CSS

4 个答案: