मैं पाया है कि इनपुट क्षेत्र में एक <label> और यह स्थिति का उपयोग करने के लिए है इस को हल करने के लिए सबसे अच्छा तरीका। यह आपको देता है:
- अधिक सौंदर्य स्वतंत्रता
- अपने पृष्ठ अर्थ
- आप शान से नीचा
- इनपुट मूल्य के रूप में टूलटिप प्रस्तुत करके समस्याएं पैदा नहीं करता है या प्रबंधन के बारे में चिंता करने की ज़रूरत के लिए अनुमति देता रहता है उस समस्या
यहां एक वेनिला संस्करण है क्योंकि आपने कोई ढांचा नहीं मांगा है। मार्कअप को बदलने की आवश्यकता नहीं है, लेकिन आपको अपनी जरूरतों के साथ काम करने के लिए सीएसएस को समायोजित करने की आवश्यकता हो सकती है।
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();
};
};
Vanilla demo
आप देख सकते हैं, कोड के बारे में आधे 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 लाइब्रेरी को शामिल करने की आवश्यकता होगी।
स्रोत
2010-02-07 21:27:14
एक सवाल हम इसे अधिभार के बिना लोड कर सकते हैं? चूंकि मैं इस सहायक का उपयोग कर रहा हूं, यह AJAX की मदद से भरा हुआ है और मैं पहले से ही कुछ चीजों का उपयोग कर रहा हूं। – Shishant