Quiero agregar texto útil (en javascript SIN USO DEL MARCO) en los campos de entrada text y textarea algo así pero no sé cuál es su llama<input type = "text"> helper (desvanece el texto cuando el usuario escribe) javascript
me.com http://i48.tinypic.com/rrhvye.png
como se usa en me.com pero no quiero que presente los valores que se utilizan como ayudantes.
Lo siento por el mal inglés.
Gracias.
He encontrado que la mejor manera de resolver esto es utilizar un <label> y la posición sobre el área de entrada. Esto le da:
Aquí hay una versión estándar ya que no pidió un marco. El marcado no debería tener que cambiar, pero es posible que deba ajustar el CSS para que funcione con sus necesidades.
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-compliant browsers.
this.label.onclick = function() {
self.hide();
};
};
Como se puede ver, alrededor de la mitad del código está envuelto en la inicialización de la window.onload. Esto puede mitigarse usando un marco. Aquí hay una versión utilizando 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. No es necesario cambiar el marcado, pero, por supuesto, deberá incluir la biblioteca jQuery.
Prueba esto:
<input type="text" name="member_name" value="Member Name" onFocus="field_focus(this, 'Member Name');" onblur="field_blur(this, 'Member Name');" />
Por supuesto, le gustaría crear una contraseña de entrada tipo para el campo de contraseña, por lo que este no será útil para el cuadro de texto de la contraseña.
También puede incluir esto en funciones si se trata de varios campos:
<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>
Hola esto funciona bien, pero nos puede aclarar esto cuando formulario se envía al igual que para los campos opcionales? También podemos envolver esto en la función? porque tengo muchos campos de entrada y áreas de texto – Shishant
¿Por qué quiere borrar estos cuadros de texto? si desea borrarlos antes de enviar el formulario, no se pasarán datos de estos cuadros de texto al script de procesamiento. – Sarfraz
Me refiero a borrarlos si los valores son valores predeterminados, más bien enviarlos, voy a utilizar su formulario de descripción de producto y no el formulario de inicio de sesión, por lo que hay muchos campos de opciones. – Shishant
La manera más fácil:
<input type=text placeholder="Member name">
Esta es la mejor y más limpia respuesta, pero hay una fuerte advertencia al respecto, ya que el atributo 'placeholder' solo está disponible cuando se utiliza [HTML5] (http://diveintohtml5.info/forms.html#placeholder) como página codificación – tatlar
Una pregunta ¿podemos cargarlo sin cargar? Debido a que el formulario que estoy usando este asistente está cargado con la ayuda de ajax y ya estoy usando algunas cosas onload. – Shishant