JQuery佔位符HTML5模擬器

Question

我一直在使用HTML 5佔位符，只是意識到它不能在HTML5設備之外工作。正如您在下面的代碼中看到的，佔位符總是小寫，並且值始終爲大寫。

#maphead input::-webkit-input-placeholder { 
    text-transform:lowercase; 
} 
#maphead input:-moz-placeholder { 
    text-transform:lowercase; 
} 
<input id="start" type="text" spellcheck="false" placeholder="enter your post code" style="text-transform:uppercase;" class="capital"/> 

除了處理非HTML 5設備時，這一切都很好。爲此，我使用了一個混雜的javascript。

function activatePlaceholders() { 
     var detect = navigator.userAgent.toLowerCase(); 
     if (detect.indexOf("safari") > 0) return false; 
     var inputs = document.getElementsByTagName("input"); 
     for (var i=0;i<inputs.length;i++) { 
      if (inputs[i].getAttribute("type") == "text") { 
       var placeholder = inputs[i].getAttribute("placeholder"); 
       if (placeholder.length > 0 || value == placeholder) { 
        inputs[i].value = placeholder; 
        inputs[i].onclick = function() { 
         if (this.value == this.getAttribute("placeholder")) { 
          this.value = ""; 
         } 

         return false; 
        } 
        inputs[i].onblur = function() { 
         if (this.value.length < 1) { 
          this.value = this.getAttribute("placeholder"); 
          $('.capital').each(function() { 
      var current = $(this).val(); 
      var place = $(this).attr('placeholder'); 
      if (current == place) { 
       $(this).css('text-transform','lowercase') 
      } 
      }); 
         } 
        } 
       } 
      } 
     } 
    } 

    window.onload = function() { 
     activatePlaceholders(); 
    } 

首先這個Javascript是rancid。必須有一個更簡單的JQuery方式。現在，雖然上面的這些工作確實有效（合理地），但它不響應將佔位符保持爲小寫，並且該值以大寫形式，因爲它使用佔位符來設置值。

我設置你所有了一個漂亮的小提琴http://jsfiddle.net/Z9YLZ/1/

Answer 1

嘗試是這樣的：

$(function() { 
    $('input[type="text"]').each(function() { 
     $(this).focus(function() { 
      if ($(this).attr('value') === $(this).attr('placeholder')) { 
       $(this).css('text-transform','lowercase'); 
       $(this).attr('value', ''); 
      } 
     }).blur(function() { 
      if ($(this).attr('value') === '') { 
       $(this).css('text-transform','uppercase'); 
       $(this).attr('value', $(this).attr('placeholder')); 
      } 
     }).blur(); 
    }); 
}); 

編輯：顯式聲明的文本轉換到正常級聯。

Answer 2

試試這個，我用了一段時間，它完美的作品：

(function($, undefined) { 

var input = document.createElement('input'); 
if ('placeholder' in input) { 
    $.fn.hinttext = $.hinttext = $.noop; 
    $.hinttext.defaults = {}; 
    delete input; 
    return; 
} 
delete input; 

var boundTo = {}, 
    expando = +new Date + Math.random() * 100000 << 1, 
    prefix = 'ht_', 
    dataName = 'hinttext'; 

$.fn.hinttext = function(options) { 

    if (options == 'refresh') { 

    return $(this).each(function() { 
     if ($(this).data(dataName) != null) { 
      focusout.call(this); 
     } 
    }); 
    } 

    options = $.extend({}, $.hinttext.defaults, options); 

    if (!(options.inputClass in boundTo)) { 

    $('.' + options.inputClass) 
     .live('focusin click', function() { 
     $($(this).data(dataName)).hide(); 
     }) 
     .live('focusout', focusout); 
    boundTo[options.inputClass] = true; 
     } 

    return $(this).each(function(){ 

    var input = $(this), 
     placeholder = input.attr('placeholder'); 

     if (placeholder && input.data(dataName) === undefined) { 

     var input_id = input.attr('id'), 
      label_id = prefix + expando++; 

     if (!input_id) { 
      input.attr('id', input_id = prefix + expando++); 
     } 

     $('<label/>') 
      .hide() 
      .css('position', options.labelPosition) 
      .addClass(options.labelClass) 
      .text(placeholder) 
      .attr('for', input_id) 
      .attr('id', label_id) 
      .insertAfter(input); 

     input 
      .data(dataName, '#' + label_id) 
      .addClass(options.inputClass) 
      .change(function() { 
       focusout.call(this); 
      }); 
     } 

     focusout.call(this); 
    }); 
}; 

$.hinttext = function(selector, options) { 
    if (typeof selector != 'string') { 
     options = selector; 
     selector = 'input[placeholder],textarea[placeholder]'; 
    } 
    $(selector).hinttext(options); 
    return $; 
}; 

$.hinttext.defaults = { 
    labelClass: 'placeholder', 
    inputClass: 'placeholder', 
    labelPosition: 'absolute' 
}; 

function focusout() { 

    var input = $(this), 
     pos = input.position(); 

    $(input.data(dataName)).css({ 
     left: pos.left + 'px', 
     top: pos.top + 'px', 
     width: input.width() + 'px', 
     height: input.height() + 'px' 
    }) 

    .text(input.attr('placeholder')) 

    [['show', 'hide'][!!input.val().length * 1]](); 
} 

$($.hinttext); 

})(jQuery); 

你只需要確保樣式label.placeholder與CSS看起來一樣的HTML5佔位符文本（顏色：＃999）

Answer 3

試試這個：http://jsfiddle.net/msm595/Z9YLZ/12/

Answer 4

有點晚，但這裏是我做的。將所有默認值存儲在頁面加載中，然後在僅點擊默認值時清除值文本。這可以防止JS清除用戶輸入的文本。

jQuery(document).ready(function($){ 

var x = 0; // count for array length 

$("input.placeholder").each(function(){ 
    x++; //incrementing array length 
}); 

var _values = new Array(x); //create array to hold default values 

x = 0; // reset counter to loop through array 

$("input.placeholder").each(function(){ // for each input element 
    x++; 
    var default_value = $(this).val(); // get default value. 
    _values[x] = default_value; // create new array item with default value 
}); 

var current_value; // create global current_value variable 

$('input.placeholder').focus(function(){ 
    current_value = $(this).val(); // set current value 
    var is_default = _values.indexOf(current_value); // is current value is also default value 

    if(is_default > -1){ //i.e false 
     $(this).val(''); // clear value 
    } 
}); 

$('input.placeholder').focusout(function(){ 
    if($(this).val() == ''){ //if it is empty... 
     $(this).val(current_value); //re populate with global current value 
    } 

}); 

});