javascript - 占位符不显示

Question

我做了一些 jquery 验证，当用户离开 input 并且没有写东西时，我希望一些文本显示为 placeholder。

这段代码是我写的

$('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 开发工具 chrome dev tool , 但它没有显示在页面上。

Answer 1

你有一个额外的 ! 在这里:

 !!$(this).val()

你可以在同一个 (this)

中加入 css 和 attr

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