Etiquetado de la entrada: HTML

JavaScript — 1 Comentario
11
Abr 10

Formularios estilo inline en HTML y javascript

En muchos formularios nos puede venid bien que tengan un formato inline al estilo del login de facebook, es decir, que el contenido del campo nos indique qué hay que introducir y cuando vayamos a ese campo eliminemos el contenido para que el usuario lo rellene. Con esto nos ahorraríamos poner “label” para cada campo.

<input type="text" name="mi_variable"
     onfocus="if( this.value == 'etiqueta' ) { this.value = ''; }"
     onblur="if( this.value == '' ) { this.value = 'etiqueta'; }"
     value="etiqueta" />

Siendo ‘etiqueta’ el nombre del contenido. En el caso de las contraseñas se podría hacer igual pero solamente veríamos asteriscos, así que habría que cambiar el type también. Como añadido podríamos cambiar el color según es onfocus u onblur a través de this.style.color.
Aquí va otro ejemplo:

<input type="text" name="Password"
     onfocus="
       if( this.value == 'Password' ) {
          this.value = ''; // Borramos el contenido para dejarlo limpio para el usuario
          this.style.color = '#000000'; // Lo ponemos en negro
          this.type = 'password'; // Lo convertimos en password para que muestre asteriscos
       }"
     onblur="
       if( this.value == '' ) {
          this.value = 'Password'; // Volvemos a ponerle el texto en caso de no haber añadido una password
          this.style.color = '#CCCCCC'; // Lo ponemos en gris
          this.type = 'text'; // Lo pasamos a texto si no ha introducido password
       }"
     value="Password" />
PHP — Sin comentarios
24
Feb 10

Procesar cadena en BBCode para pasar a HTML: básico

En esta ocasión, una función para convertir una cadena en formato BBCode (Bulletin Board Code), típico de los foros, y convertirlos a html para mostrarlos.
Este parser nos permite almacenar los textos con código diferente al HTML y así evitar que alguien guarde contenido en javascript o sentencias HTML que puedan perjudicar.

function BBCodeAHTML( $cadena ) {
    // Eliminamos etiquetas HTML que pueda contener la cadena
    $cadena = strip_tags( $cadena );
    // Ahora con la cadena limpia de etiquetas HTML definimos las etiquetas BBCode que queremos tener
    $etiquetas = array(
        'N' => array( 'type'=>BBCODE_TYPE_NOARG, 'open_tag'=>'<strong>', 'close_tag'=>'</strong>' ), // Negrita
        'C' => array( 'type'=>BBCODE_TYPE_NOARG, 'open_tag'=>'<i>', 'close_tag'=>'</i>' ), // Negrita
        'S' => array( 'type'=>BBCODE_TYPE_NOARG, 'open_tag'=>'<span style="text-decoration:underline">', 'close_tag'=>'</span>' ), // Subrayado
        'D' => array( 'type'=>BBCODE_TYPE_NOARG, 'open_tag'=>'<span style="text-align:right">', 'close_tag'=>'</span>' ), // Alinieación Derecha
        'I' => array( 'type'=>BBCODE_TYPE_NOARG, 'open_tag'=>'<span style="text-align:left"', 'close_tag'=>'</span>' ), // Izquierda
        'M' => array( 'type'=>BBCODE_TYPE_NOARG, 'open_tag'=>'<span style="text-align:rcenter"', 'close_tag'=>'</span>' ), // Centrada
    );
    // Eltras etiquetas son: [N] Para negrita, [C] Para cursiva, [S] Para subrayado, [D], [I], [M] Para las alineaciones, derecha, izquierda o medio

    // Procesamos los cambios
    $parser = bbcode_create( $etiquetas );
    $cadena = bbcode_parse( $parser, $cadena );
    // Eliminamos el resto de las etiquetas que pudiera haber
    $cadena = preg_replace( '[\[(.+)\]]', '', $cadena );
    // Devolvemos la cadena limpia y traducida al HTML
    return( $cadena );
}