[Hack / Javascript] Intégrer des images cliquables dans vos champs texte !

Publié le 24 mars 2016 par #Ro0t

Salut la compagnie,

Comme vous le savez Dyrk travaille pas mal sur le développement d’une extension de gestion de mot de passe, et je travaille d’ailleurs en ce moment sur des nouvelles features que vous découvrirez prochainement !

Aussi dans l’une de ces nouvelles features, je m’attelle à mettre en place automatiquement une petite image dans des champs textes !

Alors aujourd’hui, ~~il n’y a aucun moyen automatique de faire ça~~ …
Je suis tombé sur une bonne centaine de popote sur internet … toutes aussi originales les unes que les autres …

Aucune n’étant universelle, je me suis permis de rajouter encore une fois mon petit grain de sel sur la toile avec cette superbe fonction javascript qui fera le café sans soucis !

var AddButtonOnTextField = function(id_or_el, src, func_s) {
    var d = document;
    var obj = (id_or_el.setAttribute) ? id_or_el : d.getElementById(id_or_el);
    var Left = obj.offsetLeft,
        Top = obj.offsetTop,
        Height = obj.clientHeight,
        Width = obj.clientWidth;
    img = d.createElement('img');
    img.addEventListener('click', func_s);
    img.setAttribute('style', 'height:' + Height + ';position:absolute;top:' + 
                               (Top + 2) + 'px;left:' + (Left + Width - 18) + 'px');
    img.setAttribute('src', src);
    d.body.appendChild(img);
}

Bref, avec cette fonction, vous pourrez directement envoyer des objets :

<input type="text" value="My Button Text Field ->" id="test">


<script>
el = document.getElementById('test');
AddButtonOnTextField(el,'icone_facebook.gif', function(){ alert(1); });
</script>

Ou simplement indiquer l‘id de l’objet :

<input type="text" value="My Button Text Field ->" id="test">


<script>
AddButtonOnTextField('test','icone_facebook.gif', function(){ alert(1); });
</script>