Question

我做了一些jquery验证，当用户离开placeholder并且没有写一些内容时，我想要一些文字显示为input。

我写了这段代码

$('input[type="text"]').on('blur', function() {
    if ( !!$(this).val() ) {
        $(this).css({
            'border': '#ff8383 1px solid'
        });
        $(this).attr('placeholder', 'this field is required');
    }
    else {
        $(this).css({
            'border': '#c3c3c3 1px solid'
        });
        $(this).attr('placeholder', '');
    }
});

它适用于chrome dev工具 chrome dev tool，但它没有显示在页面上。

Answer 1

这可能是个问题;你在if语句中有2个刘海。

 if ( !!$(this).val() ) {

Answer 2

你这里有额外的!：

 !!$(this).val()

您可以css加入attr同一(this)

$('input[type="text"]').on('blur', function() {
  if (!$(this).val()) {
    $(this).css({
      'border': '#ff8383 1px solid'
    }).attr('placeholder', 'this field is required');
  } else {
    $(this).css({
      'border': '#c3c3c3 1px solid'
    }).attr('placeholder', '');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" placeholder="test" />
<input type="text" placeholder="" />
<input type="text" />

占位符不显示

2 个答案: