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

Posté le

maxresdefault

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 !

 

Capture

 

 

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>

 

 

0
Astuces, Script , , , ,

Laisser une réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site est protégé par reCAPTCHA et le GooglePolitique de confidentialité etConditions d'utilisation appliquer.