I want to add helpful text (in javascript WITHOUT ANY FRAMEWORK USE) in input fields text and textarea something like this but dont know what its called
As it is used in me but I dont want to submit the values that are used as helpers.
Sorry for bad english.
Thank You.
I want to add helpful text (in javascript WITHOUT ANY FRAMEWORK USE) in input fields text and textarea something like this but dont know what its called
As it is used in me. but I dont want to submit the values that are used as helpers.
Sorry for bad english.
Thank You.
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Feb 7, 2010 at 18:00 ShishantShishant 9,29415 gold badges59 silver badges81 bronze badges3 Answers
Reset to default 9Easiest way:
<input type=text placeholder="Member name">
Try this:
<input type="text" name="member_name" value="Member Name" onFocus="field_focus(this, 'Member Name');" onblur="field_blur(this, 'Member Name');" />
Ofcourse, you would like to create input type password for the password field, so this won't be useful for the password text box.
You can also wrap this in functions if you are dealing with multiple fields:
<script type="text/javascript">
function field_focus(field, text)
{
if(field.value == text)
{
field.value = '';
}
}
function field_blur(field, text)
{
if(field.value == '')
{
field.value = text;
}
}
</script>
I've found that the best way to solve this is to use an <label> and position it over the input area. This gives you:
- More aesthetic freedom
- Keeps your page semantic
- Allows you to gracefully degrade
- Doesn't cause problems by submitting the tooltip as the input value or have to worry about managing that problem
Here's a vanilla version since you asked for no framework. The markup shouldn't need to change, but you may need to adjust the CSS to work with your needs.
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>
vanilla-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-pliant browsers.
this.label.onclick = function() {
self.hide();
};
};
Vanilla demo
As you can see, about half of the code is wrapped up in the initialization in the window.onload. This can be mitigated by using a framework. Here's a version using 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. The markup doesn't need to be changed, but of course you'll need to include the jQuery library.