我想在输入字段text和textarea中添加有用的文本(在没有任何框架使用的
javascript中)这样的东西,但不知道它叫什么
me.com http://i48.tinypic.com/rrhvye.png
因为它在me.com中使用,但我不想提交用作帮助程序的值.
抱歉英文不好.
谢谢.
解决方法
我发现解决此问题的最佳方法是使用< label>并将其放在输入区域上.这给你：
>更多的审美自由
>保持页面语义
>允许您优雅地降级
>通过提交工具提示作为输入值或不必担心管理该问题不会导致问题
这是一个vanilla版本,因为你没有要求框架.标记不需要更改,但您可能需要调整CSS以满足您的需求.
HTML：
<html>
<head>
<style>
label.magiclabel {
position: absolute;
padding: 2px;
}
label.magiclabel,input.magiclabel {
width: 250px;
}
.hidden { display: none; }
</style>
<noscript>
<style>
/* Example of graceful degredation */
label.magiclabel {
position: static;
}
</style>
</noscript>
</head>
<body>
<label>This is not a magic label</label>
<form>
<label class="magiclabel" for="input-1">Test input 1</label>
<input class="magiclabel" type="text" id="input-1" name="input_1" value="">
<label class="magiclabel" for="input-2">Test input 2 (with default value)</label>
<input class="magiclabel" type="text" id="input-2" name="input_2" value="Default value">
</form>
<script src="magiclabel.js"></script>
</body>
</html>
香草magiclabel.js
(function() {
var oldOnload = typeof window.onload == "function" ? window.onload : function() {};
window.onload = function() {
// Don't overwrite the old onload event,that's just rude
oldOnload();
var labels = document.getElementsByTagName("label");
for ( var i in labels ) {
if (
// Not a real part of the container
!labels.hasOwnProperty(i) ||
// Not marked as a magic label
!labels[i].className.match(/\bmagiclabel\b/i) ||
// Doesn't have an associated element
!labels[i].getAttribute("for")
) { continue; }
var associated = document.getElementById( labels[i].getAttribute("for") );
if ( associated ) {
new MagicLabel(labels[i],associated);
}
}
};
})();
var MagicLabel = function(label,input) {
this.label = label;
this.input = input;
this.hide = function() {
this.label.className += " hidden";
};
this.show = function() {
this.label.className = this.label.className.replace(/\bhidden\b/ig,"");
};
// If the field has something in it already,hide the label
if ( this.input.value ) {
this.hide();
}
var self = this;
// Hide label when input receives focuse
this.input.onfocus = function() {
self.hide();
};
// Show label when input loses focus and doesn't have a value
this.input.onblur = function() {
if ( self.input.value === "" ) {
self.show();
}
};
// Clicking on the label should cause input to be focused on since the `for`
// attribute is defined. This is just a safe guard for non-compliant browsers.
this.label.onclick = function() {
self.hide();
};
};
如您所见,大约一半的代码都包含在window.onload的初始化中.这可以通过使用框架来缓解.这是使用jQuery的版本：
$(function() {
$("label.magiclabel[for]").each(function(index,label) {
label = $(label);
var associated = $("#" + label.attr("for"));
if ( associated.length ) {
new MagicLabel(label,associated);
}
});
});
var MagicLabel = function(label,input) {
// If the field has something in it already,hide the label
if ( input.val() !== "" ) {
label.addClass("hidden");
}
label.click(function() { label.addClass("hidden"); });
input.focus(function() { label.addClass("hidden"); });
input.blur(function() {
if ( input.val() === "" ) {
label.removeClass("hidden");
}
});
};
jQuery demo.标记不需要更改,但当然您需要包含jQuery库.
