Question

我一直在尝试在我正在构建的表单上实现浮动标签。

我在这里使用这种技术，几乎所有工作正常http://webdesign.tutsplus.com/tutorials/implementing-the-float-label-form-pattern--webdesign-16407

这是足够好的代码：

// Code for adding/removing classes here
$('div.js-form-element').find('input, textarea').on('keyup blur focus',
function(e) {
  // Cache our selectors
  var $this = $(this),
    $parent = $this.parent().parent();
  if (e.type == 'keyup') {
    // keyup code here  
    if ($this.val() == '') {
      $parent.addClass('js-hide-label');
    } else {
      $parent.removeClass('js-hide-label');
    }
  } else if (e.type == 'blur') {
    // blur code here
    if ($this.val() == '') {
      $parent.addClass('js-hide-label');
    } else {
      $parent.removeClass('js-hide-label').addClass(
        'js-unhighlight-label');
    }
  } else if (e.type == 'focus') {
    // focus code here
    if ($this.val() !== '') {
      $parent.removeClass('js-unhighlight-label');
    }
  }
});

我在本教程之上尝试做的一件事是添加或删除一个类，具体取决于该字段是否包含内容但不依赖于keyup，blur或focus。适用的字段也可以通过外部方式填写。我需要能够检测值是否为空并且需要“更改”事件来监听的东西。

我试过这个，添加一个on change功能，但无济于事：

        // Code for adding/removing classes here
      $('div.js-form-element').find('input, textarea').on(
    'change keyup blur focus', function(e) {
      // Cache our selectors
      var $this = $(this),
        $parent = $this.parent().parent();
      // Add or remove classes
      if (e.type == 'change') {
        // change code here  
        if ($this.val() == '') {
          $parent.addClass('js-hide-label');
        } else {
          $parent.removeClass('js-hide-label');
        }
      } else if (e.type == 'keyup') {
        // keyup code here  
        if ($this.val() == '') {
          $parent.addClass('js-hide-label');
        } else {
          $parent.removeClass('js-hide-label');
        }
      } else if (e.type == 'blur') {
        // blur code here
        if ($this.val() == '') {
          $parent.addClass('js-hide-label');
        } else {
          $parent.removeClass('js-hide-label').addClass(
            'js-unhighlight-label');
        }
      } else if (e.type == 'focus') {
        // focus code here
        if ($this.val() !== '') {
          $parent.removeClass('js-unhighlight-label');
        }
      }
    });

感谢所有帮助：）

Answer 1

将您的代码更改为：

        // Code for adding/removing classes here
  $('div.js-form-element').find('input, textarea').on(
'change keyup blur focus', function(e) {
  // Cache our selectors
  var $this = $(this),
    $parent = $this.parent().parent();
  // Add or remove classes
  if (e.type == 'change') {
    // change code here  
    if ($this.val() == null || $this.val() == undefined) {
      $parent.addClass('js-hide-label');
    } else {
      $parent.removeClass('js-hide-label');
    }
  } else if (e.type == 'keyup') {
    // keyup code here  
    if ($this.val() == null || $this.val() == undefined) {
      $parent.addClass('js-hide-label');
    } else {
      $parent.removeClass('js-hide-label');
    }
  } else if (e.type == 'blur') {
    // blur code here
    if ($this.val() == null || $this.val() == undefined) {
      $parent.addClass('js-hide-label');
    } else {
      $parent.removeClass('js-hide-label').addClass(
        'js-unhighlight-label');
    }
  } else if (e.type == 'focus') {
    // focus code here
    if ($this.val() != null || $this.val() == undefined) {
      $parent.removeClass('js-unhighlight-label');
    }
  }
});

使用jQuery检查value是否为null

1 个答案: