Artículo

---

0 ¡votar!

Diversas acciones que se pueden hacer sobre un textarea

Vamos a ver una serie de opciones que se pueden utilizar sobre los textareas para darle más funcionalidad de una forma sencilla. Algunas de estas cosas solo será posible utilizarla sobre navegadores que implementen HTML 5.

Añadir una imagen de fondo y que desaparezca cuando se introduzca el texto

En nuestro textarea podemos poner una imagen de fondo y hacer que cuando se empiece a escribir texto dentro del elemento, la imagen desaparezca. Para ello debemos de utilizar estilos y código javascript.

El código CSS para poner la imagen de fondo es el siguiente:

textarea {
background: url(images/benice.png) center center no-repeat;
border: 1px solid #888;
}

Para quitar la imagen de fondo, podemos utilizar el siguiente código jQuery.

$('textarea')
.focus(function() { $(this).css("background", "none") })
.blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

Propiedad placeholder de HTML 5

HTML 5 nos proporciona una nueva propiedad que nos permite introducir texto dentro de la caja y que una vez esta tome el control, este texto desaparecerá. El problema de utilizar esta propiedad, es que no funcionará en los navegadores que no interpreten HTML 5.

Al utilizar esto, nuestro formulario quedaría de la siguiente forma:

<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

Comprobar si el navegador acepta la propiedad Placeholder con jQuery

Otra opción para realizar la acción anterior en los navegadores que no acepten la propiedad placeholder, es primero comprobar si el navegador la reconoce. Si no es así, entonces por medio de jQuery se simulará esa acción.

La función que comprueba si acepta la propiedad sería la siguiente:

function elementSupportsAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
};

Cuando se empieza a escribir en la caja de texto, si acepta la propiedad el navegador, el texto desaparecerá, y si no lo acepta, por medio de jQuery haremos que desaparezca.

if (!elementSupportsAttribute('textarea', 'placeholder')) {
// Fallback for browsers that don't support HTML5 placeholder attribute
$("#example-three")
.data("originalText", $("#example-three").text())
.css("color", "#999")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("originalText")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("originalText");
}
});
} else {
// Browser does support HTML5 placeholder attribute, so use it.
$("#example-three")
.attr("placeholder", $("#example-three").text())
.text("");
}

Quitar el borde azul que cubre al textarea

Los navegadores que implementan Webkit añaden al textarea un borde azul cuando este toma el foco. Para evitar que se ponga de este color, lo podemos hacer por medio de estilos. Para conseguirlo deberemos de añadir lo siguiente:

textarea {
outline: none;
}

Quitar la opción de redimensionar el textarea

Los navegadores que implementan Webkit, a los textarea le añade en la esquina inferior derecha una opción para redimensionar la caja de texto con solo pulsar y arrastrar. Si nosotros queremos desactivar esta opción, se puede hacer con la propiedad “resize”. El código sería el siguiente:

textarea {
resize: none;
}

Añadir la opción de redimensionar en los textareas

Si la opción que hemos mencionado antes de redimensionar lo queremos añadir a todos los navegadores, no solo a los que implementan Webkit que lo traen por defecto, lo podremos hacer pero habrá que utilizar jQuery y jQuery UI para conseguir.

Lo primero que habrá que hacer será añadir las dos librerías a nuestro desarrollo y luego hacer la siguiente llamada.

$("textarea").resizable();

Poder escribir en una línea hasta que pulses en retorno del carro

Por defecto, en los textarea cuando las líneas son muy grandes, el elemento tienda a cortarlas. Si queremos escribir todo en una línea y que no se baje a la de abajo hasta que se pulse le intro lo podemos hacer por medio de la propiedad “wrap”. Desactivando esta propiedad, podremos escribir en una línea tanto como queramos, y nos aparecerá una barra de desplazamiento horizonta.

<textarea wrap="off" cols="30" rows="5"></textarea>

Vía: css-tricks.com

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios