处理表单元素值的函数

时间:2013-02-12 16:17:58

标签: javascript jquery html css forms

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

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

  1. 在函数调用中,它在DOM中搜索给定的表单,并将CSS类添加到任何输入字段/ textareas,而忽略input[type="submit"]<button>
  2. 如果有值,则将该值与输入的/ textarea ID一起放在数组或对象中,如#myInputID => initial value
  3. 在焦点上,删除CSS类,并检查数组/对象中是否存在当前值。如果找到该值,则将其删除,以使输入/ textarea为空。如果找不到,则没有任何反应,价值保持不变。
  4. 在模糊时,检查字段是否为空或者是否在数组/对象中找到当前值。如果找到它或输入的/ textarea的值为空,则再次放置对象/数组的初始值,同时重新添加CSS类。如果在数组或对象中找不到值,则该值将保留,并且不会重新添加CSS类。
  5. 在代码中看起来像这样:

    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" );
    

    当然它没有完成,但仍有几个问题(它甚至没有工作......),但我不能自己解决。这些是我的主要问题:

    • 我应该使用数组或对象(hashmap?)来保存密钥=&gt;价值对?我对此发现了不同的意见,即使在这里也是如此。我如何比较这些值?如何在这样的数组/对象中推送值?
    • 在某些时候,缓存$this.val()是个好主意。什么是最好的地方?
    • 代码出现任何重大性能问题?
    • 触发模糊事件时,如果用户未输入任何内容,则需要将值重置为初始值。这不起作用,因为我的数组中没有任何键来识别元素。

    这是一个快速测试小提琴:Fiddle

2 个答案:

答案 0 :(得分:1)

要保存键值对,请使用您可以像关联数组一样访问的对象。键应该是包含值的输入字段的唯一内容(可能是其ID)。所以从你的下面的例子中得到....

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

此时检索任何值变得简单:只使用元素的ID。您还可以删除搜索整个值数组以查找现在可以按ID搜索的值的任何需要。因此,那里的表现也会得到改善。

答案 1 :(得分: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" />