如何解决jQuery占位符HTML5模拟器
| 我一直在使用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\"/>
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();
}
解决方法
尝试这样的事情：
$(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();
});
});
(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);
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
}
});
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。