0

我正在尝试编写一个小函数来placeholder稍微“伪造”HTML5 属性的行为。我知道已经有插件可以做到这一点，但我想自己编写它，因为我真的想在 jQuery 上做得更好。

到目前为止，这是我认为应该发生的事情。如果您发现任何不必要的东西，请告诉我。

  1. 在函数调用时，它会在 DOM 中搜索给定的表单，并将 CSS 类添加到任何输入字段/文本区域，省略input[type="submit"]和<button>.
  2. 如果有值，则将该值与输入/文本区域的 ID 一起放入数组或对象中，例如#myInputID => initial value.
  3. 在焦点上，CSS 类被移除，并检查当前值是否存在于数组/对象中。如果找到该值，则将其删除，以便 input/textarea 为空。如果未找到，则不会发生任何事情，并且该值保持不变。
  4. 模糊时检查该字段是否为空或是否在数组/对象中找到当前值。如果找到或输入的/textarea 的值为空，则重新放置来自对象/数组的初始值，并重新添加 CSS 类。如果在数组或对象中找不到值，则该值将保留并且不会重新添加 CSS 类。

在可能如下所示的代码中：

function placeholder( element ) {
  var values = [];
  console.log( values );

    $( element ).find( ":input" ).each( function() {
      var $this = $( this );

      // adding CSS class
      $this.addClass( "light" );

      if( $this.val() ){
        // adding value to array
        // the key is missing, maybe add an id to the elements?
        values.push( $this.val() );
      }

      $this.focus( function(){
        // remove CSS class
        $this.removeClass( "light" );

        // if value is in array  
        var i = $.inArray( $this.val() , values );
        if( i != -1 ) {
          $this.val( "" );
        }
      })// focus

      $this.blur(function(){
        // setting value to inital value if needed
        // add CSS class
        var i = $.inArray( $this.val() , values );
        if( i == -1 ) {
          $this.val( "initalValue" );
          $this.addClass( "light" );
        }
      })// blur

    }) // each
} // function

placeholder( "form" );

当然它还没有完成，还有几个问题（它甚至不工作......），但我无法自己解决。这些是我的主要问题：

  • 我应该使用数组还是对象（哈希图？）来保存键 => 值对？我发现对此有不同的看法，即使在 SO 上也是如此。以及如何比较这些值？如何在这样的数组/对象中推送值？
  • 在某些时候，缓存是个好主意$this.val()。最好的地方是什么？
  • 代码有任何主要的性能问题吗？
  • 当触发模糊事件时，如果用户没有输入任何内容，则需要将值重置为其初始值。这不起作用，因为我的数组中没有任何键来识别元素。

这是一个用于快速测试的小提琴：小提琴

4

2 回答 2

1

要保存键值对，请使用您可以访问的对象，例如关联数组。键应该是包含值的输入字段的唯一内容（可能像它的 ID）。因此，从您的以下示例中获取....

if( $this.val() ){
     // adding value to array
     values[$this.attr('id')] = $this.val();
}

此时检索任何值都变得很简单：只需使用元素的 ID。您还无需搜索整个值数组来查找值，现在您可以按 ID 搜索。所以那里的性能也会得到改善。

于 2013-02-12T16:28:28.690 回答
1

没有你说的那么复杂...

jQuery :

$('#myform').
on('focus', '.autoclear', function () {
    if (this.value === this.defaultValue) {
        this.value = '';
    }
    $(this).removeClass('blur').addClass('focus');
}).
on('blur', '.autoclear', function () {
    if (this.value === '') {
        this.value = this.defaultValue;
    }
    $(this).removeClass('focus').addClass('blur');
});

HTML：

工作演示：http: //jsfiddle.net/L2pfW/

<input type="text" name="field" value="name" class="autoclear" />
于 2013-02-12T16:29:34.447 回答