JavaScript

Super Placeholder

Publicado por antlou em 06/09/2017

Este script escrito em linguagem javascript de nome superplaceholder é uma biblioteca para trazer vida às suas caixas de entrada de texto (inputs) ao rodar várias instruções num único espaço reservado.

Resultado:

Clique em qualquer campo para ver o funcionamento do script.

Vou colocar o codigo abaixo, utilizando linguagem JAVASCRIPT e HTML complementado com um pouco de CSS para tornar o visual mais agradavel personalizando e definindo alguns elementos.

super_placeholder.html



<html>
<head>
    <link href='super_placeholder.css' rel='stylesheet' type='text/css'>        
</head>

<body>
    <input id="elemento1" type="text" value="" placeholder="Email">
        
    <input id="elemento2" type="password" value="" placeholder="Password">

    <script src="super_placeholder.js"></script>
    
    <script>
    superplaceholder({
        el: elemento1,
        sentences: [ 
        'Digite o seu email', 
        'utilizador at servidor dot TLD',
        'me@google.com' ],
        options: {
        loop: true
        }
    })
    superplaceholder({
        el: elemento2,
        sentences: [
        'Minimo 8 carateres',
        'Utilize carateres especiais,alfanumericos, maiusculas e minusculas', 
        'Ex. v&J@1sT0' ],
        options: {
        loop: true,
        letterDelay: 30
        }
    })    
    </script>
    
</body>
</html>

super_placeholder_js.js



;(function () {
    var test = document.createElement('input');
    var isPlaceHolderSupported = ('placeholder' in test);

    // Helpers
    function extend(obj1, obj2) {
        var obj = {};
        for (var key in obj1) {
            obj[key] = obj2[key] === undefined ? obj1[key] : obj2[key];
        }
        return obj;
    }

    var defaults = {
        letterDelay: 100, //milliseconds
        sentenceDelay: 1000, //milliseconds
        loop: false,
        startOnFocus: true,
        shuffle: false,
        showCursor: true,
        cursor: '|'
    };

    // Constructor: PlaceHolder
    function PlaceHolder(el, texts, options) {
        this.el = el;
        this.texts = texts;
        options = options || {};
        this.options = extend(defaults, options);
        this.timeouts = [];
        this.begin();
    }

    PlaceHolder.prototype.begin = function() {
        var self = this,
            temp,
            randomIndex;
        self.originalPlaceholder = self.el.getAttribute('placeholder');
        if (self.options.shuffle) {
            for (var i = self.texts.length; i--;) {
                randomIndex = ~~(Math.random() * i);
                temp = self.texts[randomIndex];
                self.texts[randomIndex] = self.texts[i];
                self.texts[i] = temp;
            }
        }

        if (self.options.startOnFocus) {
            self.el.addEventListener('focus', function () {
                self.processText(0);
            });
            self.el.addEventListener('blur', function () {
                self.cleanUp();
            });
        }
        else {
            self.processText(0);
        }
    };

    PlaceHolder.prototype.cleanUp = function () {
        // Stop timeouts
        for (var i = this.timeouts.length; i--;) {
            clearTimeout(this.timeouts[i]);
        }
        this.el.setAttribute('placeholder', this.originalPlaceholder);
        this.timeouts.length = 0;
    };

    PlaceHolder.prototype.typeString = function (str, callback) {
        var self = this,
            timeout;

        if (!str) { return false; }
        function setTimeoutCallback(index) {
            // Add cursor `|` after current substring unless we are showing last
            // character of the string.
            self.el.setAttribute('placeholder', str.substr(0, index + 1) + (index === str.length - 1 || !self.options.showCursor ? '' : self.options.cursor));
            if (index === str.length - 1) {
                callback();
            }
        }
        for (var i = 0; i < str.length; i++) {
            timeout = setTimeout(setTimeoutCallback, i * self.options.letterDelay, i);
            self.timeouts.push(timeout);
        }
    };

    PlaceHolder.prototype.processText = function(index) {
        var self = this,
            timeout;

        self.typeString(self.texts[index], function () {
            timeout = setTimeout(function () {
                self.processText(self.options.loop ? ((index + 1) % self.texts.length) : (index + 1));
            }, self.options.sentenceDelay);
            self.timeouts.push(timeout);
        });
    };

    var superplaceholder = function (params) {
        if (!isPlaceHolderSupported) { return; }
        new PlaceHolder(params.el, params.sentences, params.options);
    };

    // open to the world.
    // commonjs
    if( typeof exports === 'object' )  {
        module.exports = superplaceholder;
    }
    // AMD module
    else if( typeof define === 'function' && define.amd ) {
        define(function () {
            return superplaceholder;
        });
    }
    // Browser global
    else {
        window.superplaceholder = superplaceholder;
    }
})();

super_placeholder.css



/*
********************************************
* super_placeholder.css                                     
* Author:antlou                            
* Version:1.0                              
* Date:05/09/2017                          
********************************************
*/

* {box-sizing: border-box;}

html, body {
    font-family: 'Roboto', sans-serif;
    background: gray;
    color: rgba(0,0,0,0.5);
    text-align: center;
    margin: 0;
    }
    
input[type="text"],
input[type="password"] {
    border: 3px solid rgba(0,0,0,0.1);
    color: #666;
    border-radius: 5px;
    padding: 0.5em 1em;
    margin-bottom: 10px;
    font-size: 1em;
    width: 600px;
    background-clip: padding-box;
    }
    
input[type="text"]:focus {
    outline: 0;
    }

voltar ao topo ↑

Download Código

Espero ter sido útil. Deixe avaliação ao script

1 votos - 5 pontos - 46 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.