Função criar elemento input usando DOM

8 02 2008

Este exemplo foi criado a partir da necessidade num projeto que fiz, onde tinha arquivos que seria livres e outros privados.

Neste exemplo mostro como criar um campo input ao click em um link ou botão.

Função que cria o elemento DOM

/**
 * Função criar componente usando DOM
 * Evento onclick
 * @author Deusimar Ferreira
 */
function criaElemento() {
  // Verifica se já foi criado o elemento
  if(!document.getElementById('labelInput')){
    // Label area senha
    var labelInput = document.createElement('label'); // Cria um elemento label
    labelInput.innerHTML = 'Senha: '; // Define o texto
    labelInput.id = 'labelInput'; // Define ID

    // Input type password
    var input = document.createElement('input'); // Cria um elemento input
    input.type = 'password'; // Define o tipo como password
    input.name = 'senha'; // Define o nome como senha
    input.id = 'senha'; // Define o Id com senha
    input.size = '10'; // Define o tamanho para 10

    labelInput.appendChild(input); // Adiciona o input ao label
    document.body.appendChild(labelInput); // Adiciona o label ao corpo do documento
  }
}

Função que remover o elemento DOM

/**
 * Função remove componente
 * Evento onclick
 * @author Deusimar Ferreira
 */
function removeElemento() {
  document.body.removeChild(document.getElementById('labelInput')); // Remove os elementos do corpo do documento
}




Auto preenchimento em JS(Equivalente ao str_pad no PHP)

8 02 2008

Bem galeira, esta função faz um auto-preenchimento em uma determinada string.

Ex: tenho um campo que seria obrigatório ter 4 digitos, mas ele poderia receber valores com uma, duas, três ou quatro digitos, ae surgiu a ideia de fazer um preenchimento no campos caso o valor recebido fosse menor que 4 espaços, dei uma Googlezada e encotrei esta função que equivale a str_pad do PHP, fiz apenas uma alteração, pois quando inseria um valor númerico a função não reconhecia, a solução foi fazer com que os valores de entrada sejam transformados em uma string.

Você tem as seguintes opções:
STR_PAD_RIGHT, STR_PAD_LEFT ou STR_PAD_BOTH, caso não seja definido na chamada da função o parametro pad_type ele assume como default o valor ‘STR_PAD_RIGHT’.

Veja:
o valor de entrada para este exemplo será 8, a quantidade de espaço a ser preenchido será 4 e o valor adicionado é 0.

//Preenche a esquerda.
document.write(str_pad(8, 4, 0, 'STR_PAD_LEFT'))
//resultado: 0008
//Preenche nas duas extremidades.
document.write(str_pad(8, 4, 0, 'STR_PAD_BOTH'))
//resultado: 0080
//Preenche a direita.
document.write(str_pad(8, 4, 0, 'STR_PAD_RIGHT'))
//resultado: 8000
/**
 * @credits http://kevin.vanzonneveld.net
 * original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
 */
function str_pad( input, pad_length, pad_string, pad_type ) {
    var input = this.String(input);

    var half = '', pad_to_go;

    function str_pad_repeater(s, len){
        var collect = '', i;

        while(collect.length  0) {
        if (pad_type == 'STR_PAD_LEFT') { input = str_pad_repeater(pad_string, pad_to_go) + input; }
        else if (pad_type == 'STR_PAD_RIGHT') { input = input + str_pad_repeater(pad_string, pad_to_go); }
        else if (pad_type == 'STR_PAD_BOTH') {
            half = str_pad_repeater(pad_string, Math.ceil(pad_to_go/2));
            input = half + input + half;
            input = input.substr(0, pad_length);
        }
    }

    return input;
  }