JQuery占位符HTML5模拟器

我一直在使用HTML 5占位符，只是意识到它不能在HTML5设备之外工作。 正如您在下面的代码中看到的，占位符始终为小写，值始终为大写。

#maphead input::-webkit-input-placeholder { text-transform:lowercase; } #maphead input:-moz-placeholder { text-transform:lowercase; }  

除了处理非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 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是腐败的。 必须有一个更简单的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++); } $('') .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); 

您只需确保使用CSS设置label.placeholder样式，使其与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){ //ie 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 } }); });